Css For The First Direct Child Only

I have the following html structure:

Solution 1:

Use the first child selector:

.nav-collapse.nav:first-child {}

You can combine it with the direct child selector if you have more nested .nav elements.

.nav-collapse > .nav:first-child {}

Solution 2:

The > operator means that it will select only the matching children that are a direct child (thus one level deep) of the defined parent, instead of matching all children on all levels from the defined parent.

Using :first-child is perfectly ok but some problems could arise in IE7 and IE8 when dynamic content is involved. See http://www.quirksmode.org/css/selectors for known issues. When in doubt, select the first child by it's class or id attribute.

Solution 3:

If you change the class 'nav' to 'nave' it works as is! I suspect 'nav' is a reserved word.

Share