Target last instance of class in parent

Question

I have said divs:

<div>
    <div class="p1"></div>
    <div class="p2"></div>
    <div class="p1"></div>
    <div class="p2"></div>
</div>
<div>
    <div class="p1"></div>
    <div class="p2"></div>
    <div class="p1"></div>
    <div class="p2"></div>
</div>

I want to style the last p1 div in each parent div. I've tried some last-child code, but it doesn't want to take. Any ideas?

There is no selector that can target the last instance of a class in css, currently, if you can use jquery, this would be a fairly easy task — Huangism, Oct 29 '14 at 19:48
No way to do this in CSS. You'll need to write a bit of JS to find all the children with class `p1`, then apply styling to the last of them. — , Oct 29 '14 at 19:51
@OP please clarify if you can use javascript/jquery for an answer or not and also clarify if your code structure is always like this or is this just a simplified example. — Huangism, Oct 29 '14 at 20:10
If you want to do it in pure CSS - you will have to add a second class to the last element. A la http://stackoverflow.com/a/6401298/961695 — Yuriy Galanter, Oct 29 '14 at 20:20

score 5 · Accepted Answer · answered Oct 29 '14 at 20:00

5

This can't be done with pure css. I reccomend this using jquery:

$("div").find(".p1:last").css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="p1">not</div>
  <div class="p2">not</div>
  <div class="p1">this</div>
  <div class="p2">not</div>
</div>
<div>
  <div class="p1">not</div>
  <div class="p2">not</div>
  <div class="p1">this</div>
  <div class="p2">not</div>
</div>

answered Oct 29 '14 at 20:00

Alex Char

32,879
9
49
70

1

Good and simple solution +1 – Fahad Hasan Oct 29 '14 at 20:04
1

@FahadHasan true if OP wanted a jquery solution, I assume not since there is no javascript or jquery tag – Huangism Oct 29 '14 at 20:05

score 0 · Answer 2 · answered Oct 29 '14 at 19:52

You can't target the last element with class for p1 ... But if your structure is like that always and right after p1 is p2 . Then you know that the last p1 will be the penultimate element, you can try this:

.p1:nth-last-child(2) {
    background:black;
    color:white;
}

Here some info about :nth-last-child.

And DemoFiddle

score 0 · Answer 3 · answered Oct 29 '14 at 19:54

This function finds the last child of some element with a given class:

function last_of_class(elt, cls) {
    var children = elt.getElementsByClassName(cls);
    return children[children.length-1];
}

Now, you can use this to apply a class or some styling:

var last_p1 = last_of_class(parent, 'p1');
last_p1.classList.add('last-p1');

.last-p1 { color: red; }

score 0 · Answer 4 · answered Oct 29 '14 at 20:07

0

CSS supports the :last-of-type selector. However, that will not select the last occurence of a class, but the last occurence of a TYPE.

So, as a hack, you could define your own types instead of classes and use that selector:

HTML:

<div>
    <p1>1</p1>
    <p1>2</p1>
    <p2>3</p2>
</div>
<div>
    <p1>1</p1>
    <p1>2</p1>
    <p2>3</p2>
    <p1>4</p1>
</div>

CSS:

p1{
    display:block;
}
p2{
    display:block;
}

div p2:last-of-type{
    background-color:red;
}

http://jsfiddle.net/kwa8y85n/2/

for older browser, you would need to teach them about the element(s) using some javascript, like

<!--[if lt IE 9]> 
<script> document.createElement("p1"); document.createElement("p2"); </script>
<![endif]-->

but then you could pretty much use the jquery way... consider this answer as an "option" :-)

answered Oct 29 '14 at 20:07

dognose

20,360
9
61
107

If the OP can change the code that much then why not add a class to the last p1 instead – Huangism Oct 29 '14 at 20:09
He didn't mention that he cannot change the code. Maybe he just uses a foreach to generate the entries, and does not know, when hitting the last element of a certain type to add the proper "class"? – dognose Oct 29 '14 at 20:10
@dognose: Very creative, but I mean gosh, the `` element is not going to act like a `
` at all, so is this really a good direction to go in, aside from the valid point raised by @Huangism?
– Oct 29 '14 at 20:11
@dognose I don't know, only the OP can answer that – Huangism Oct 29 '14 at 20:12
@torazaburo well, you can add *any* style information to pX to act like a `
` - that's no problem.
– dognose Oct 29 '14 at 20:14
But after all the jQuery way is the better way I'd say. The **best** way would be the suggestion from Huan, to generate the element in question with `class="p2 last"` when building the html-markup. – dognose Oct 29 '14 at 20:20

Target last instance of class in parent

4 Answers4