CODEWITHSUNDEEP
htmlcss
AndrewH
AndrewH

Reputation: 370

Have li:nth-child effect only parent list and not child list

I am able to achieve the effect I want but wondering if there is a better way of coding. I am using li:nth-child() to select parts of a parent list I want to add a border to.

However I do not want these to effect sub lists inside the parent list.

HTML

<ul class="nav">
<li>Link 1

    <ul>
        <li>Sub Link 1</li>
    </ul>
</li>
</ul>

CSS

.nav li:nth-child(-n+3) {
    border-left: 4px solid #FFC50A;
}

How do I get the "Sub Link 1" to not have a border without using:

.nav > li > ul > li {
    border: 0px !important;   
}

Should I just give the parent list a class to make the list have a border instead of using .nav li:nth-child(-n+3)?

See Fiddle

Upvotes: 0

Views: 374

Answers (2)

Hashem Qolami
Hashem Qolami

Reputation: 99474

As I noted in comments, you could use child selector in order to prevent for the inner list items from be treated by the selector, as follows:

.nav > li:nth-child(-n+3) {
    border-left: 4px solid #FFC50A;
}

EXAMPLE HERE

5.6 Child selectors
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by >.

Upvotes: 2

Mitch Goudy
Mitch Goudy

Reputation: 815

Unfortunately, due to the cascading nature of CSS, I don't think this is explicitly possible (yet).

I think if I were implementing this, I might define parent and child classes for each list. This would help with specificity, but you can run into problems if the HTML is generated instead of hand-coded.

EDIT:

Another thing I just thought of is (depending on your scalibility needs here), you could try just styling children with your overrides like so:

fiddle

    <li>Link 1
        <ul>
            <li class="childList">Sub Link 1</li>
        </ul>
    </li>

and

.childList {
position: relative;
width: 175px;
padding: 0;
display: inline-block;
margin-right: 20px;
color: #555;
border: 0px !important;

}

. I'm not really sure how this list will be balanced, so to speak, so this could be a bad answer as well.

Upvotes: 0

Related Questions