CODEWITHSUNDEEP
htmlcss
adit
adit

Reputation: 33644

css for the first direct child only

I have the following html structure:

<div class="nav-collapse">
              <ul class="nav">

              </ul>

              <ul id="registerCart" class="nav pull-right">

              </ul>

</div>

and I wanted to apply the following rule only to the first nav, so I did:

.nav-collapse > .nav {
    left: 135px;
}

however this is applying to the registerCart as well. How do I apply this only to the first nav?

Upvotes: 1

Views: 2109

Answers (3)

MalcolmTW
MalcolmTW

Reputation: 1

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

Upvotes: 0

jazZRo
jazZRo

Reputation: 1608

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.

Upvotes: 1

Fleshgrinder
Fleshgrinder

Reputation: 16253

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 {}

Upvotes: 5

Related Questions