CSS span alternating colour with children

Question

I've got a dom structure which is generated by a JS framework and may looks like this:

span:nth-child(odd) { background-color: lightblue; }
span {
    display: block;
}

<div id="parent">
  <div class="child">
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
  </div>
  <div class="child">
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
  </div>
  <div class="child">
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
  </div>
  <div class="child">
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>

  </div>
  <div class="child">
    <span>Some text to color in alternate colors</span>
  </div>
</div>

I'm trying to color the span alternatively no matter if the parent is the same or not. I gave it a try with pseudo selectors and this question CSS div alternating colour, with no luck. Is this achievable with CSS only or should I dig into a JS framework solution based?

JS is certainly the easy approach, I don't believe this is possible (with a dynamic structure) in just CSS. — DBS, May 05 '23 at 09:55
if all of them have the same height, we can find workarounds — Temani Afif, May 05 '23 at 10:09
@TemaniAfif, are you thinking of a linear-gradient as the parent's background? — Amaury Hanser, May 05 '23 at 12:06

score 1 · Accepted Answer · answered May 05 '23 at 10:51

I doubt there's a cross-browser CSS-only solution so I recommend using a little bit of Javascript.

Using the querySelectorAll() of the Document interface we can get a list of elements matching the query requested by a selector passed to the function.

So if we want all <span> elements:

document.querySelectorAll("span")

If we now go further and transform the returned HTMLCollection into an array, we can filter out the even or odd elements and add a CSS class using the element.classList.add() function.

Array.from(document.querySelectorAll("span")).forEach((element, index) => {
  if (index % 2 == 0) {
    element.classList.add("background");
  }
})

.background {
  background-color: lightblue;
}

span {
  display: block;
}

<div id="parent">
  <div class="child">
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
  </div>
  <div class="child">
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
  </div>
  <div class="child">
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
  </div>
  <div class="child">
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
    <span>Some text to color in alternate colors with the previous span no matter if it's the same parent or not</span>
  </div>
  <div class="child">
    <span>Some text to color in alternate colors</span>
  </div>
</div>

Not the answer I was looking for, but the answer I needed. Thanks — Thomas Ayoub, May 09 '23 at 04:43

CSS span alternating colour with children

1 Answers1