Clever Geek Handbook

Choose even class members regardless of their type

I have elements of a given secondclass

class with a gray background, and I would like even the even elements of this class to have a red background. I cannot use a selector nth-child()

because these elements may not be the only inner parent.

I've tried the following:

.secondclass {
    background-color:#aaa;
}

.secondclass:nth-of-type(2n+1) {
    background-color:red;
}

This works great until I put an element of the same type secondclass

inside the parent (i.e. div). This makes sense because it nth-of-type()

is of type, not class:

<div>some text</div>
<div class="secondclass"></div>
<div class="secondclass"></div>

Fiddle

Is there a pure-CSS way to select only the even elements of a subset secondclass

regardless of their type?

+3


source to share


2 answers


Why not just make 2 classes for even and uneven and just assign those classes where needed? If not, trying to figure out how to do boolean validation inside CSS seems like a very long workaround for the same result.

The class for "even" elements will have a red background, and the "uneven" ones will have a gray background.

.uneven {
    background-color:#aaa;
}

.even {
    background-color:red;
}


And divs:

<div>some text</div>
<div class="uneven"></div>
<div class="even"></div>
+2


source


Only one way I can see is using a different HTML tag. How:

<div>some text</div>
<span class="secondclass"></span>
<span class="secondclass"></span>

Demo:



JS violin

But there is no pure CSS solution

+1


source






More articles:


All Articles