CODEWITHSUNDEEP
csscss-selectors
Kellie Bottrell
Kellie Bottrell

Reputation: 59

Css3 - first-child and last-child selector issues

I am having trouble coding my first and last child selectors.

Firstly I would like to remove the right border off the last child of the parent navigation menu only (not the drop down menus), my current code is affecting the drop down menu also. I am having the same issue with removing the left border off the first child.

Secondly, I wanted to add a box shadow to the left and right of the parent navigation menu, but this is also impacting on the drop down menu.

I would appreciate some advice on where i am going wrong. Thanks

My CSS3 code is:

 ul#navmenu li:last-child a  {border-right: none;}

 ul#navmenu li:first-child a {border-left: none;}

 ul#navmenu li:last-child {box-shadow: 200px 0px 0px 0px white;}

 ul#navmenu li:first-child {box-shadow:-200px 0px 0px 0px white;}

Upvotes: 1

Views: 100

Answers (1)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

Access the direct child of the ul elements like below using > for direct child selector

 ul#navmenu > li:last-child a  {border-right: none;}

 ul#navmenu > li:first-child a {border-left: none;}

 ul#navmenu > li:last-child {box-shadow: 200px 0px 0px 0px white;}

 ul#navmenu > li:first-child {box-shadow:-200px 0px 0px 0px white;}

Your current selector is ul#navmenu li this means to select all the li tags that come under the ul which can be at any level deep.

But this selector ul#navmenu > li restricts the selection to only the immediate child of ul#navmenu and this is what you need.

Upvotes: 5

Related Questions