CODEWITHSUNDEEP
htmlcsscss-selectors
user1050619
user1050619

Reputation: 20856

Format 2nd child from a list item

I have a ul item and within it I have 2 more ul items. I need to format the 2nd row in the ul.

Demo Fiddle

HTML

<ul class="horizontal">
    <li>First List
    <ul class="ul1">
        <li>first</li>
        <li>Second</li>
        <li>Third</li>
    </ul>
    <li>Second List
    <ul>
        <li>first</li>
        <li>Second</li>
        <li>Third</li>
    </ul>
</ul>

CSS

.horizontal >li {
  float: left;
  list-style: none;
  margin: 10px;
}

ul:nth-child(2) {
    color:RED
}

Upvotes: 3

Views: 2193

Answers (3)

Laurens Kling
Laurens Kling

Reputation: 2261

The reason why your code is not working is because you are selecting the :nth-child UL, not the LI. Pseudo selectors (like :nth's) work on your current selector, not its children. This is quite confusing for things like :first-child and :nth-child, but remember it like this: something:is, like a:hover

Upvotes: 0

Colin Bacon
Colin Bacon

Reputation: 15609

Mr. Alien is correct but instead making your CSS very specific, could you not just use a class on the ul or even the li in question. This would make your CSS easier to manage/override in the future.

It's important to remember that the browser works from right to left when reading CSS and applying it.

Example

<ul class="horizontal">
    <li>First List
    <ul class="ul1 nested-list">
        <li>first</li>
        <li class="list-item-red">Second</li>
       <li>Third</li>
    </ul>
    </li>
    <li>Second List
        <ul class="nested-list">
            <li>first</li>
            <li class="list-item-red">Second</li>
            <li>Third</li>
        </ul>
    </li>
</ul>

.list-item-red { color: red; }

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157314

You need to use the selector below..

ul > li > ul > li:nth-of-type(2) {
   color: red;
}

Demo

Explanation: The above selector means select the ul element, than move and and select direct li nested under ul, than move ahead and select direct ul nested under li and than at the end, we select the 2nd li nested under the second level ul.

Also, only li elements can be nested inside the ul as the direct childrens, you can also use nth-child too

Upvotes: 8

Related Questions