Remove margin from every second li element

Hi,

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?

eg code…


<div id="gallery">
         <ul id="portfolio">

             		<li><a class="full_image" href="portfolio/fullpic1.png"><img src="site-images/pic1.png" alt=" " border="0" /></a></li>

			<li><a class="full_image" href="portfolio/fullpic2.png"><img src="site-images/pic2.png" alt=" " border="0" /></a></li>

			<li><a class="full_image" href="portfolio/fullpic1.png"><img src="site-images/pic1.png" alt=" " border="0" /></a></li>

			<li><a class="full_image" href="portfolio/fullpic2.png"><img src="site-images/pic2.png" alt=" " border="0" /></a></li>

			........etc
          </ul>
</div>



#gallery
	{width:              500px;}

#portfolio
	{
	border:	         	none;
	float:	        		right;
	margin-left:	        	20px;
	margin-bottom:		150px;
	}

#portfolio	
	{list-style-type:          none;
	padding:		        0;}

#portfolio li
	{float:			left;
	display:	        	block;
	width:			200px;
	height:			250px;
	background-color:	#000000;
	margin:			0 9px 15px;}


#portfolio li img
	{position:		        relative;
	left:			        10px;		
	top:			        15px;
	width:			180px;
	height:			200px;}

#portfolio li:hover
	{background-color:	#ebe9ed;}

Thanks in advance.
Liz

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.

With CSS3, you just use nth-child, like so:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
[COLOR="#FF0000"]li:nth-child(2n) {color: red;}[/COLOR]
</style>
</head>

<body>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
<li>seventh</li>	
</ul>
</body>

</html>


Thanks for the replies.

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.

Thanks alot for the help.
Liz.

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 … )

If you were so inclined you could use a bit of jQuery to overcome the lack of support by IE.

$('li:nth-child(2n)').addClass('alt');

Hi,

You seem to have a 9px left and right margin on each item so why don’t you just use a left margin on each and the space won’t double.


#portfolio li {
	float:			left;
	display:	        	block;
	width:			200px;
	height:			250px;
	background-color:	#000000;
	/*margin:			0 9px 15px;*/
        [B]margin:0 0 15px 9px;[/B]
}


(If you wanted the first item flush to the left then just drag the parent ul 9px to the left to start with.)

Off Topic:

Nice solution, Paul. You always seem to see the wood when all I can see is the trees.