CODEWITHSUNDEEP
csscss-selectors
user2381011
user2381011

Reputation: 351

CSS select :nth-of-class() alternative

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">
        <a href="#" class="approach">content here...</a>
    </div>
    <div class="col-md-4">
        <a href="#" class="approach">content here...</a>
    </div>
    <div class="col-md-4">
        <a href="#" class="approach">content here...</a>
    </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;
}

Upvotes: 3

Views: 3378

Answers (3)

user663031
user663031

Reputation:

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

Upvotes: 1

Rupert
Rupert

Reputation: 1639

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

}

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

}

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

}

Upvotes: -1

SeinopSys
SeinopSys

Reputation: 8937

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;
}

Upvotes: 2

Related Questions