CODEWITHSUNDEEP
csscss-selectors
mystery
mystery

Reputation: 19513

How do I select the last of a certain number of consecutive elements of the same class?

I am currently trying to colour the border of each heading a different colour in the rainbow, such that this HTML would have the first heading styled maroon, second orange, third olive:

<h2 class="rh">Heading 1</h2>
<p>Text</p>
<h2 class="rh">Heading 2</h2>
<p>Text</p>
<h2 class="rh">Heading 3</h2>
<p>Text</p>

My current CSS is this. However, this is really inefficent. Is there a better way?

.rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh {
    border-bottom: 2px solid maroon;
}
.rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh {
    border-bottom: 2px solid orange;
}
.rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh {
    border-bottom: 2px solid olive;
}
.rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh {
    border-bottom: 2px solid green;
}
.rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh {
    border-bottom: 2px solid navy;
}
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh,
.rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh ~ .rh {
    border-bottom: 2px solid purple;
}

Upvotes: 0

Views: 484

Answers (1)

Wrikken
Wrikken

Reputation: 70460

Edit #a_lot:

as we've established in the comments it the classname is not needed, we can use for most major browsers, and MSIE >=9:

.r > h2:nth-of-type(6n+1){
    border-bottom: 2px solid maroon;
}
.r > h2:nth-of-type(6n+2){
    border-bottom: 2px solid orange;
}
.r > h2:nth-of-type(6n+3){
    border-bottom: 2px solid olive;
}
.r > h2:nth-of-type(6n+4){
    border-bottom: 2px solid green;
}
.r > h2:nth-of-type(6n+5){
    border-bottom: 2px solid navy;
}
.r > h2:nth-of-type(6n+6){
    border-bottom: 2px solid purple;
}

The following answer is wrong, but kept as a reference as to why it's wrong: something like p.classname:nth-of-type(3n) selects the paragraphs which are both the 3rd p element and have the class classname, rather then every 3rd p which has class classname as I would've expected.

In the far away future, you can use nth-of-type, around the point when MSIE 9 is commonly used and MSIE6/7/8 are retired. So, for now: you're out of lock.

Upvotes: 2

Related Questions