Cant make it work this pseud-class “ img:nth-child” wondering why?

Right now, your selector is selecting the fifth img inside the . Nav li ul li . CenterText element.

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 fifth li in that nav menu, and then add your border to the image within it.

Up vote 0 down vote favorite share g+ share fb share tw.

Im trying to use the pseudo class ( img:nth-child) in this project but I cant make it work don't now why (it's the last line in the css-part). Right now Im just using the a simple function just to see how it works....but don't know why it does work? Any idea?

Thanks! The plan is to implement this pseudo class to add a right-border every 5th item you c. You can have a look the working code here: jsFiddle Thanks!

Module e2 singelCars Megane coupe cabriolet Megane Megane cabriolet Megane cabriolet Megane coupe varebilder z. E security service about more ------------------------------------- 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)===========================*/ css css3 css-selectors pseudo-class link|improve this question edited Jan 23 at 15:10BoltClock's a Unicorn?101k14145377 asked Jan 23 at 14:50YoniGeek566 67% accept rate.

Right now, your selector is selecting the fifth img inside the . Nav li ul li . CenterText element.

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 fifth li in that nav menu, and then add your border to the image within it.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions