Html Question posted in
Some basic documentation can be found here.

Html – CSS span alternating colour with children

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?

Tags:

2

Answers


  1. 0 
    div.container > div:nth-of-type(odd) {
background: #e0e0e0;

    }

    instead of using nth-child, we can use div:nth-of-type(odd)

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search