CSS Attribute?

[ethayne]

I'm wondering if there is a CSS attribute that allows you to space items of like class. For example: I have three images and I want 10px of space between them. I could put a margin-right attribute on them, but I don't want the last one (on the right) to have a right margin.

0px 10px [img] 10px [img] 0px

Any ideas? Or do I have to do it manually?

 

[Barrucadu]

I think it would be something like

img + img{
     margin-left:10px;
}

 

[Daniel]

Can't you just put margin-left:10px; margin-right:10px; on the JUST the center one?

 

[Barrucadu]

Can't you just put margin-left:10px; margin-right:10px; on the JUST the center one?

That would only work for groups of 3 - my rule should work for any number of adjacent elements.

 

[ethayne]

Can't you just put margin-left:10px; margin-right:10px; on the JUST the center one?

Yeah, I want it to be able to work with any number of objects. I could do it manually that way, but I was hoping it would be easier so I wouldn't have to change it when I added more objects.

I think it would be something like

img + img{
     margin-left:10px;
}

Hmmm, I tried it and it didn't do anything.

 

[shockie]

lol yea i was wondering about that syntax...

anyway, just have the class with margin-left: 10px; and put the first img outside of the div.

 

[ethayne]

lol yea i was wondering about that syntax...

anyway, just have the class with margin-left: 10px; and put the first img outside of the div.

Yeah, that would work, but it's still not what i'm looking for. I'd prefer an attribute that will do it automatically, but I guess it's not possible. I'll just do it manually then. Thanks for the help guys!

 

[Barrucadu]

Really? It didn't work?

I've been using similar things for quite a while now (generally paragraphs):

p + p{
     text-indent:25px;
}

 

[ethayne]

Maybe it only works with <p> tag? Let me try some things and I'll get back to you.

 

[DylanButler]

Keep in mind the adjacent selector (+) won't work in IE6 and below.

I usually just put class="last" on every last list item as necessary (assuming you'd use a list for this type of display).

For a longer list, I do something like this:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="third">Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li class="third">Item 6</li>
</ul>

..and adjust the li.third styles accordingly.

 

[ethayne]

Alright, sounds good. Thanks for all the options and advice guys!

Rep+ for everyone!