Alternating background color of nested elements [duplicate]

Question

My markup contains a tree structure of same element that looks something like this:

<div class="node">
  <div class="node">
    <div class="node" />
  </div>
  <div class="node" />
</div>

What I would like to do is to alternate their background colors for each depth. I was able to achieve this by pretty ugly css and was wondering if there is a smarter way. Here is the naive solution:

.a {
  height: 10px;
  background-color: red;
  .a {
    background-color: green;
    .a {
      background-color: red;
      /* etc... */
    }
  }
}

If you're auto-generating this using some script, then you could track it using an iterator variable, like for(let i = 0; i < .... Otherwise, you could just add a class to each child like odd and even. — AskYous
– AskYous, Commented Mar 28, 2019 at 18:01
It's a React app and the nodes are components (more or less) but it wouldn't be that simple to carry over the information whether current node should be odd or even in script. — Maroš Beťko
– Maroš Beťko, Commented Mar 28, 2019 at 18:08
@AskYous yes that seems to be pretty similar, so it seems that this can't be done with css purely. — Maroš Beťko
– Maroš Beťko, Commented Mar 28, 2019 at 18:17
Yeah you can't. If you know the maximum depth, you can write it easily using LESS or SASS, assuming it's not that big. Otherwise, you could write code to generate a new style tag. — AskYous
– AskYous, Commented Mar 28, 2019 at 18:18

feitla · Accepted Answer · 2019-03-28 17:51:43Z

0

Use the direct descendent selector

// Parent
.a {
  background: red;
}

// Child
.a > .a {
  background: green;
}

// Grandchild
.a > .a > .a {
  background: red;
}

.a {
  height: 50px;
  padding: 10px;
  width: 100%;
}

.a {
  background: red;
}

.a > .a {
  background: green;
  height: 30px;
  width: 100%;
}

.a > .a > .a {
  background: red;
  height: 10px;
  width: 100%;
}

<div class="a">
  <div class="a">
    <div class="a"></div>
    <div class="a"></div>
</div>

edited Mar 28, 2019 at 17:51

answered Mar 28, 2019 at 17:46

feitla

1,3441 gold badge7 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Maroš Beťko Over a year ago

That's exactly what I'm already doing.

feitla Over a year ago

Are you trying to do it more dynamically?

Maroš Beťko Over a year ago

Yes because the depth is not limited.

Collectives™ on Stack Overflow

Alternating background color of nested elements [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related