Repeated Nesting Alternating Style

Question

I need the style to alternate when classes are nested in a repeating pattern. Sadly right now, all the code does is override based on the order of the CSS and not the order of the HTML.

In the example below, each word needs to be the color it names. This needs to work for an indefinite number of nestings (could be a crazy huge number of nestings), and also needs to work when other CSS styles are applied, which means that the HTML cannot be changed. Also, there is no guarantee that there won't be anything between those elements which means they won't be direct parents all the time (So the > selector will not work).

Anyone know how to do this? (Or if it is even possible?)

span {
    color: black;
}
.foo a {
    color: red;
}
.bar a {
    color: green;
}

<html>
<body>
<span class="foo">
 <span class="bar">
  <span class="foo">
   <span class="bar">
    <span class="foo">
     <span class="bar">
      <strong>black <a href="http://example.org">green</a></strong>
     </span>
     <strong><br>black <a href="http://example.org">red</a></strong>
    </span>
    <strong><br>black <a href="http://example.org">green</a></strong>
   </span>
   <strong><br>black <a href="http://example.org">red</a></strong>
  </span>
  <strong><br>black <a href="http://example.org">green</a></strong>
 </span>
 <strong><br>black <a href="http://example.org">red</a></strong>
</span>
</body>
</html>

score 0 · Answer 1 · answered Nov 23 '15 at 04:09

By putting class within a class, the proper way of calling it in CSS is through the > operator.

If the CSS is as such ( see fiddle or below), there will be a yellow and green element. This is because the CSS is only at parent/first level. I put a new line of CSS below and you see 4 red elements because it only reached until the second level CSS. The rest will follow the parent elements because they do not have any style. Therefore the closest parent that have a style defined in CSS is .bar > .foo a, resulting in red for the remaining 3 elements.

span {
    color: black;
}
.foo a {
    color: yellow;
}
.bar a {
    color: green;
}
.bar > .foo a {
    color: red;
}

Html code:

<span class="foo">
    <span class="bar">
        <span class="foo">
            <span class="bar">
                <span class="foo">
                    <span class="bar">
                        <strong>1black <a href="http://example.org">green</a></strong>
                    </span>
 <strong><br>2black <a href="http://example.org">red</a></strong>

</span> <strong><br>3black <a href="http://example.org">green</a></strong>

</span> <strong><br>4black <a href="http://example.org">red</a></strong>

</span> <strong><br>5black <a href="http://example.org">green</a></strong>

</span> <strong><br>6black <a href="http://example.org">red</a></strong>

</span>

http://jsfiddle.net/de9ppead/

Yes, I know that. But there is also no guarantee that there won't be anything between those elements which means they won't be direct parents all the time. I need a solution that works with that. And adding more CSS for each level isn't an option because I have no idea how many levels there are going to be. — Danegraphics, Nov 23 '15 at 05:49
It comes to whether it is practical to use this way of coding. `` is the supposed way of structuring codes and even you were to have such many layers, another class name could be used and share the same css. This allows easy maintenance as well. — cweitat, Nov 23 '15 at 06:01
To answer your question: It is not possible to do it in the way you stated. — cweitat, Nov 23 '15 at 06:16
http://stackoverflow.com/questions/10055299/are-alternate-nested-styles-possible-in-css you can check this out — cweitat, Nov 30 '15 at 02:01

Repeated Nesting Alternating Style

1 Answers1