CODEWITHSUNDEEP
htmlcsshtml-lists
Giri
Giri

Reputation: 4909

css remove inherited list styles

I have css code like this

<ul class="simple-list">                                
    <li>
      <ul>
        <li>Paper</li>
        <li>Pen</li>
     </ul>
    </li>
    <li>
      <ul>
        <li>Paper</li>
        <li>Pencil</li>
     </ul>
    </li>
</ul>

Now when I use style like this

.simple-list li {
border-bottom: 1px solid #EEE;
display: block;
}

It affects all child li elements too. Can someone tell me how to make it affect only the first li element. ?

Upvotes: 2

Views: 804

Answers (2)

TommyBs
TommyBs

Reputation: 9648

Do you mean only the immediate li children of .simple-list (i.e the first level)? or just the first one? If it's immediate children only you want

.simple-list > li

For just the first one you want @Steve Fenton's answer above

Upvotes: 2

Fenton
Fenton

Reputation: 251242

Like this:

.simple-list li:first-child {

You can check support for first-child on caniuse.com

Upvotes: 3

Related Questions