Not sure if you can do this with CSS but I have an unordered list of images set out as a grid 2x4. I have a 9px left margin on each list item, but I would like to remove the margin from every second list item if this makes sense. I need to do this without adding to the HTML (adding classes etc,)
Is this possible?
I can’t quite understand what you are trying to do there (the layout isn’t clear from your description/code) but you can select every second item with CSS3. That won’t help with all browsers, though, so you could use JavaScript instead.
You perhaps could use CSS2 as well, in a more convoluted way, by using the adjacent sibling selector (+), but it’s a bit messy, and I’m not sure quite what you are trying to achieve here. Do you want two list items per line?
I know that with CSS you can do li:first-child and li:last-child, but I don’t know about the 2nd child… you would most likely have to use JavaScript to do this.
Ralph, the nth-child works fine in all my browsers bar IE (No surprise there). I may look for a Javascript solution at a later date, but it’s only a small asthetic flaw so I am quite happy with this solution for the meantime.
Yes, o well. It does seem to be well supported other than that. And it is supported in IE9, which people should be starting to use more an more (though unfortunately it doesn’t run on XP, which is ridiculous, but anyhow, it’s MS after all … )