CODEWITHSUNDEEP
csssass
Maarten Kuijper
Maarten Kuijper

Reputation: 354

Scss, nth-child & :not() selector

I'm a bit new to scss and I have this basic style for rows in my rows container. 

.rows-container{
    border-bottom:2px ridge grey;
}
.row{
    height:30px;width:100%;

    &:hover div{
        background-color:lightgrey;
        }
    &:nth-child(odd){
        background: white;
        }
    &:nth-child(even){
        background: #e0e0e0;
        }
}

pretty straight forward with the following html: i have left out some html that is not important.

<div class="rows-container">
    <div class="row></div> //white
    <div class="row></div> //grey
    <div class="row></div> //white
    <div class="row></div> //grey etc...
</div>

But now I have added child rows

<div class="rows-container">
    {{each rows}}
        <div class="row"></div>           //parent row

        {{each childs}}
        <div class="subitem"></div>   //several rows from the same table which have a parent_id connected to the current row.
        {{#each}}

    {{#each}}
</div>

I am planning to toggle the subitems on click. But when no subitems are visible (subitems have a color of their own), the '.rows' odd/even is messed up. Now I think this is caused because the nth-child odd/even is calculated on all rows/subitems in the container, and not just the .row(s). Is there a way to odd/even style the .rows, but exclude .subitems from the odd/even rotation? I was thinking that maybe there is a way to use :not() in scss, but so far I have not succeeded.

Upvotes: 5

Views: 13309

Answers (2)

zer00ne
zer00ne

Reputation: 43910

As I already commented: If you make your .row into <section> and keep the siblings (they are on the same level (next to each other) not nested inside of .row) as <div>, you can maintain the odd/even sequence on the .row by using:

section:nth-of-type(odd)

Using :nth-of-type() selector allows you to more control by using different tags which when used strategically, will allow you to specifically target tags.

Demo

section:nth-of-type(odd) {
  background: rgba(0, 0, 0, .4)
}

section:nth-of-type(even) {
  background: rgba(200, 0, 0, .4)
}
<div class="rows-container">
  <section class="row">ROW1</section>
  <div>DIV</div>
  <section class="row">ROW2</section>
  <div>DIV</div>
  <div>DIV All divs are not children of any .row</div>
  <div>DIV All divs are siblings of the .row</div>
  <section class="row">ROW3</section>
  <div>DIV</div>
  <section class="row">ROW4</section>
  <div>DIV</div>
  <div>DIV</div>
  <section class="row">ROW5</section>
  <div>DIV</div>
  <section class="row">ROW6</section>
  <div>DIV</div>
  <div>DIV</div>
  <div>DIV</div>
</div>

Upvotes: 3

Dalin Huang
Dalin Huang

Reputation: 11342

use :nth-of-type

so your code should be:

.row{
    height:30px;width:100%;

    &:hover div{
        background-color:lightgrey;
        }
    &:nth-of-type(odd){
        background: white;
        }
    &:nth-of-type(even){
        background: #e0e0e0;
        }
}

REF: https://css-tricks.com/almanac/selectors/n/nth-of-type/

.subitem:nth-of-type(even) {
  background: lightslategrey;
}

.subitem:nth-of-type(odd) {
  background: red;
}
<div class="subitem">subitem</div>
<div class="">subitem no class</div>
<div class="">subitem no class</div>
<div class="subitem">subitem</div>
<div class="subitem">subitem</div>
<div class="">subitem no class</div>
<div class="">subitem no class</div>
<div class="subitem">subitem</div>
<div class="">subitem no class</div>
<div class="">subitem no class</div>

Upvotes: 7

Related Questions