I’m trying to use the pseudo class ( img:nth-child) in this project but I can’t make it work (it’s the last line in the css-part). Right now I’m just using the a simple function just to see how it works. The plan is to implement this pseudo class to add a right-border every 5th item. You can see the working code here: jsFiddle
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>module e2</title>
<link href="css/e2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class"main">
<ul class="nav">
<li><a class="mainNav" id="car_1" href="#"><p><img class="mainMenuImg" src="img/singel_car.png" />singelCars<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
<ul >
<li class="borders"><a href="#" class="centerText "><img class="" src="http://placehold.it/178x108/" /> <p class=""> Megane coupe cabriolet</p></a></li>
<li><a href="#" class="centerText"> <img class=""src="http://placehold.it/179x108/" /><p class=""> Megane </p></a></li>
<li><a href="#" class="centerText"> <img src="http://placehold.it/179x108/" /><p class=""> Megane cabriolet</p></a></li>
<li><a href="#" class="centerText"> <img src="http://placehold.it/179x108/" /><p class=""> Megane cabriolet</p></a></li>
<li><a href="#" class="centerText"> <img src="http://placehold.it/179x108/" /><p class=""> Megane coupe </p></a></li>
</ul>
</li>
<li><a class="mainNav" id="car_2" href=" #"><p><img class="mainMenuImg" src="img/items_car.png" />varebilder<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
<li><a class="mainNav" id="car_3" href="#"><p><img class="mainMenuImg" src="img/ze.png" />z.e<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
<li><a class="mainNav" id="security" href="#"><p>security </p></a>
</li>
<li><a class="mainNav" id="services" href="#"><p>service</p></a>
</li>
<li><a class="mainNav" id="aboutRenault" href="#"><p>about</p></a>
</li>
<li><a class="mainNav" id="more" href="#"><p>more<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
</ul> <!-- ends #nav -->
</div> <!-- ends main -->
</body>
</html>
-------------------------------------
body { margin: 0; font-size: 12px; line-height: 1.231; font-family:Arial, Helvetica, sans-serif;}
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/* =============================================================================
main
========================================================================== */
.main img{ margin: 0;}
.main{ margin: auto; width: 900px;/* background:url(http://placehold.it/900x500/e67c78);*/}
.nav{ margin:auto; padding:0; list-style-type:none; list-style-position:outside; float: left; background: #CCC; }
.nav li a, .nav li{ float: left;}
.nav li{ position:relative; list-style: none;}
.nav li p{ margin-top: 12px; }
.nav li a{ text-decoration: none; background: #2a2a2a; color: #FFF; }
/*.main #nav .centerText img{ border-left: 1px solid black; border-bottom: 1px solid black; }*/
/*=====================================================================*/
.main a.mainNav, a.mainNav:link, a.mainNav:visited {display: block; height: 49px; background: #282828; border-right: 1px solid #797979; margin-top:0px; text-align:center; color: #fff; text-transform: uppercase; line-height:25px; overflow:hidden; float: left;}
.nav #car_1{ width: 190px; margin-left: 0px; }
.nav #car_2{ width: 190px; }
.nav #car_3{ width: 106px; color: #1f8b95; }
.nav #security{ width: 147px; }
.nav #services{ width: 69px; }
.nav #aboutRenault{ width: 100px; }
.nav #more{ width: 92px; border-right: none; background:#f7b100; }
.nav li .arrowMargin { margin-left: 5px;}
/*main menu images/cars*/
.nav li p .mainMenuImg{ margin-right: 12px; }
/*centering text on images*/
.main .nav .centerText p{ position: absolute; top: 70px; margin-left: 20px; display: solid; font-family: 'Yanone Kaffeesatz', Arial; font-size: 1.2em; text-transform: uppercase; letter-spacing: 0.5px; color: black;}
/*main a-tags*/
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
a.mainNav:hover {color:#000; background:#fff;}
a #more:hover{color:#000; background:#f7b100;}
/*==================UNDER LEVELS======================================*/
.nav li ul{ display: none;/** switch: on/off to show the underlevel*/ position:absolute; left:0; top: 100%; margin: 0; padding: 0; width: 900px;}
.nav li:hover ul{ display: block;}
.main .nav li ul li, .nav li ul li a{ float: left; display: inline-block; border-left: 1px solid black; border-bottom:1px solid black; }
.nav li ul li .centerText img:nth-child(5){ border: 1px solid red; !important; } /* THIS LINE DOEST WORK ? DONT KNOW WHY? */
/*==================styling images (li-elements)===========================*/
Right now, your selector is selecting the fifth img inside the
.nav li ul li .centerTextelement. There is only one image in each, so this won’t select anything at all. You need to change it to.nav li ul li:nth-child(5n+1) .centerText img. This will select every fifthliin that nav menu, and then add your border to the image within it.