Remove margin from every second li element

**Liz_uk** · Dec 16, 2011 05:39

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...

HTML 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>

Code CSS:

 
#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

**ralph.m** · Dec 16, 2011 06:07

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?

**Talks_44** · Dec 16, 2011 06:19

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.m** · Dec 16, 2011 06:24

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

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
li:nth-child(2n) {color: red;}
</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>

**Liz_uk** · Dec 16, 2011 12:28

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.

**ralph.m** · Dec 16, 2011 19:29

Originally Posted by Liz_uk

the nth-child works fine in all my browsers bar IE (No surprise there).

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

**imaginekitty** · Dec 16, 2011 19:44

Originally Posted by Liz_uk

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.

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

Code JavaScript:

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

**Paul O'B** · Dec 18, 2011 14:49

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.

Code:

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

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

**ralph.m** · Dec 18, 2011 16:21

Off Topic:

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

User Tag List

Thread: Remove margin from every second li element

Thread Tools

Display

Remove margin from every second li element

Bookmarks

Bookmarks

Posting Permissions