Select specific element in HTML using CSS selectors [duplicate]

Question

Here's the HTML structure. This kind of data will be generated dynamically. It will have a few numbers of <p> tags with the class c1 only, and a few numbers of <p> tags with the classes c1 and c2 both.

<div class="container">
    <p class="c1 ab">The 1st paragraph.</p>
    <p class="c1 cd">The 2d paragraph.</p>
    <p class="c1 ef">The 3rd paragraph.</p>
    <p class="c1 gh">The 4th paragraph.</p>
    <p class="c1 ij c2">The 5th paragraph.</p>
    <p class="c1 kl c2">The 6th paragraph.</p>
</div>

I need to select the last <p> tag with the class c1 but not the class c2 and apply styles to it. i.e. in the given sample code, I need to select and apply styles to the <p> tag with the classes c1 gh.

I wrote the following CSS code for the same. It selects all the <p> with the class c1, but don't know how to select the last element of such occurrence.

<style> 
.container p:not(.c2) { background: red; }
</style>

I used the following code for that, but it didn't work.

.container p:not(.c2):last-of-type { background: red; }
.container p:not(.c2) :last-of-type { background: red; }

Thanks in advance for your help!

Answer 1

:last-of-type selects the last matching element. :not(.class) is only a condition applied after the selection. The selector creates an overlapping group of:

• c1:last-of-type = ["The 6th paragraph."]
• :not(.c2) = ["The 1st paragraph.", "The 2d paragraph.", "The 3rd paragraph.", "The 4th paragraph."]

These sets do not overlap, so the selector does not match any element.

---

I was trying to find a similar selector a while ago. There is development in CSS 3 selectors that might allow this. It allows you to do this:

p:nth-last-child(1 of :not(.c2)) {
    background: red;
}

But at the time of writing this, browser support is poor. The only browsers where it does work is Safari (macOS and iOS) 9+. So this solution is still not usable for most cases.

Alternatively, you can use :nth-of-type(4) if the element is always exactly the 4th elemet. Or you can use :nth-last-of-type(3) if the element is always exactly 2 elements before the last one.

/* applicable only if the target element is always exactly 4th in .container */
.container .c1:nth-of-type(4) {
  background: red;
}


/* applicable only if the target element is always second to last */
.container .c1:nth-last-of-type(3) {
  background: red;
}


/* poor browser support (Safari 9+ at the time of writing) */
.container .c1:nth-last-child(1 of :not(.c2)) {
  background: blue;
}

<div class="container">
  <p class="c1 ab">The 1st paragraph.</p>
  <p class="c1 cd">The 2d paragraph.</p>
  <p class="c1 ef">The 3rd paragraph.</p>
  <p class="c1 gh">The 4th paragraph.</p>
  <p class="c1 ij c2">The 5th paragraph.</p>
  <p class="c1 kl c2">The 6th paragraph.</p>
</div>

If none of this applies, JavaScript is a solution, but it will not work in cases when the script is blocked.

When I was looking to solve this, I've opted for is to edit the markup to add the class which identifies the element I was looking for.