Search code examples
csspseudo-class

Issue with CSS 'everything except last' selector


I have a list of sub-lists. Each sublist has its own children. I need to apply style to all except the last sub-list. I use:

.list:not(:last-child) > .sublist {
  color: red;
}

But it is applying for all the sublists. Here's a demonstrating code (fiddle: http://jsfiddle.net/8m72m53r/3/):

:not(:last-child) > .row {
  color: red;
}
<ul class="box">
  <li class="row">One</li>
  <li class="row">Two</li>
  <li class="row">Three</li>    
</ul>
<ul class="box">
  <li class="row">FOur</li>
  <li class="row">Five</li>
  <li class="row">Six</li>    
</ul>
<ul class="box">
  <li class="row">Seven</li>
  <li class="row">Eight</li>
  <li class="row">Nine</li>    
</ul>


Solution

  • Here you go - you pretty much had it, just make sure to use the :last-of-type pseudoclass

    .box:not(:last-of-type) > .row {
        color: red;
    }
    <ul class="box">
        <li class="row">One</li>
        <li class="row">Two</li>
        <li class="row">Three</li>    
    </ul>
    <ul class="box">
        <li class="row">FOur</li>
        <li class="row">Five</li>
        <li class="row">Six</li>    
    </ul>
    <ul class="box">
        <li class="row">Seven</li>
        <li class="row">Eight</li>
        <li class="row">Nine</li>    
    </ul>