CSS style the last element in a document

Question

In the following code I want to add styling specifically to the content of the last "B".

<div class="A">
  <div>
   I am <span class="B">foo</span>.
  </div>
  <div>
   I like <span class="B">bars</span>.
  </div>
  <div>
   Actually, call me <span class="B">FOOBAR</span>.
  </div>
</div>

I have been trying

.B:last-of-type { color: red; }

and all classes "B" get selected because it uses the last occurence in it's immediate parents child elements. i.e. in it's direct siblings

Is there any way to only select the last occurence of "B" in the whole document?

Pranav C Balan · Answer 1 · 2014-02-15T04:58:57.460

3

You can do it like this

.A div:last-of-type .B { color: red; }

Fiddle Demo

or

.A div:last-child .B { color: red; }

Fiddle Demo

edited Feb 15 '14 at 04:58

answered Feb 15 '14 at 04:53

Pranav C Balan

113,687
23
165
188

for some reason this also selects all of them. The only working answer I found is above. – collinglass Feb 15 '14 at 04:56

score 2 · Answer 2 · answered Feb 15 '14 at 04:53

2

Try this JsFiddle Demo

.A div:last-child .B{ color: red; }

answered Feb 15 '14 at 04:53

Sachin Jain

21,353
33
103
168

I did, it does same thing, last child of each div – collinglass Feb 15 '14 at 04:55

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

Found the answer! CSS3 get last element

I was doing a version of this but I found it ugly, I guess this is the only way. I will keep this Question open for a bit to see if anyone has any better suggestions.

edited May 23 '17 at 10:25

Community

1
1

answered Feb 15 '14 at 04:55

collinglass

800
4
11
31

score 0 · Answer 4 · answered Feb 15 '14 at 05:09

0

.A span.B:last-child
{
background:#999;
}

answered Feb 15 '14 at 05:09

user2172603

31
3

score 0 · Answer 5 · answered Feb 15 '14 at 05:25

0

.A div:last-child .B:last-child
{
background:orange;
}

answered Feb 15 '14 at 05:25

user2172603

31
3

CSS style the last element in a document

5 Answers5