CSS select :nth-of-class() alternative - css

Question

With CSS: how do I target the first class of "approach", the second and the third one. All individually because they need different styles. I can't add an extra class to avoid responsive disorientation.
HTML code:
<div class="approaches">
<div class="col-md-4">
content here...
</div>
<div class="col-md-4">
content here...
</div>
<div class="col-md-4">
content here...
</div>
</div>
CSS code (which doesn't work at the moment):
.approaches .approach:nth-of-type(1){
color: red;
}
.approaches .approach:nth-of-type(2){
color: green;
}
.approaches .approach:nth-of-type(3){
color: blue;
}

Answer 1

There's a <div> between the .approaches and the .approach elements preventing your :nth selector from working properly. The selector looks for elements in their own nesting level, and because the .approach elements are wrapped in <div>s, they have separate nesting levels. Use the selector on the <div>s instead:
.approaches div:nth-of-type(1) .approach {
color: red;
}
.approaches div:nth-of-type(2) .approach {
color: green;
}
.approaches div:nth-of-type(3) .approach {
color: blue;
}

Answer 2

You could use .approaches div:nth-of-type(1) .approach { }, as others have suggested, but this assumes that each and every div inside .approaches has an a with the the .approach class, so it cannot really be considered to be a general way to achieve the equivalent of the non-existent nth-of-class if that's what you want.
To do that, you could use a bit of JS:
[].forEach.call(document.getElementsByClassName('approach'), function(elt, i) {
elt.classList.add('approach-' + i);
});
.approach-1 { color: red; }
Generalizing this for any class:
function add_nth_of_class(cls) {
[].forEach.call(document.getElementsByClassName(cls), function(elt, i) {
elt.classList.add(cls + '-' + i);
});
add_nth_of_class('approach');
However, this will number the classes sequentially throughout the document. To get a true nth-of-class, based on the position within the parent element, we would need to do something like the following, using the little-known TreeWalker API:
function add_nth_of_class(cls) {
var walker = document.createTreeWalker(document, NodeFlter.SHOW_ELEMENT), n;
while (n = walker.nextNode()) { //for each node in turn,
[].filter.call(n.childNodes, function(elt) { //find the children which
return elt.classList.contains(cls); //contain the class we want
}).forEach(function(elt, i) { //and for each of those
elt.classList.add(cls + '-' + (i+1)); //add a numbered class
});
}
}
CSS:
.approach-1 { // targets all elements with class .approach first within their parent

Answer 3

.approaches > div:nth-child(1) .approach {
}
.approaches > div:nth-child(2) .approach {
}
.approaches > div:nth-child(3) .approach {
}