1

I have:

<div>
  <span class="something">...</span>
  <span class="something">...</span>
  <span class="something">...</span>
</div>
<article>
  <span class="something">...</span>
</article>

I want to only select the last .something element. The last-child and so on, I believe, require the same parent.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Shamoon
  • 41,293
  • 91
  • 306
  • 570
  • 2
    Does this answer your question? [CSS last-child selector: select last-element of specific class, not last child inside of parent?](https://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i) – Sudhir Ojha Jul 14 '20 at 12:45
  • There is no way to do this with CSS alone. – Turnip Jul 14 '20 at 12:45
  • if your html structure is static and will not change then simply do `article > .something:last-child`. Then is better than the below answer – Temani Afif Jul 14 '20 at 13:21
  • But what if the element is contained in some other tag that's not `article`? – Shamoon Jul 14 '20 at 13:23
  • CSS can not select "the last element with a class _anywhere_ in the document". You would need to use JavaScript. Something like this perhaps: https://jsfiddle.net/dhv2ymwp/2/ – Turnip Jul 14 '20 at 13:29

1 Answers1

1

This is not a great solution but it does what you want in this specific example

*:last-of-type > .something:last-of-type {
  background-color: black;
}
<div>
  <span class="something">...</span>
  <span class="something">...</span>
  <span class="something">...</span>
</div>
<article>
  <span class="something">...</span>
</article>
Nico Shultz
  • 1,872
  • 1
  • 9
  • 23
  • For the specific example. `article > .something` would be enough. I think it's clear this is a contrived example to illustrate a point. – Turnip Jul 14 '20 at 12:48
  • 1
    No yours does have the same result but doesn't "select the last .something element" so it doesn't do what he asked. so your method is still not right in this specific example – Nico Shultz Jul 14 '20 at 12:53
  • Just out of curiosity, how would I do the first element? – Shamoon Jul 14 '20 at 13:03
  • Of course it selects the last .something element in the code given - there is only one element. This makes zero sense. – Turnip Jul 14 '20 at 13:06
  • no it selects the .something in article witch happens to be the last one. my code actually gets the last one. I understand what you mean, but your code doesn't do what Shamoon actualy asked – Nico Shultz Jul 14 '20 at 13:11
  • 1
    Neither will yours. It only works in a StackSnippet because there is a hidden div (the console). Try it in JSFiddle or a real webpage and it will fail: https://jsfiddle.net/13pufxzm/ – Turnip Jul 14 '20 at 13:15
  • @Shamoon are you really accepting this answer? doesn't make any sense ... – Temani Afif Jul 14 '20 at 13:15
  • The answer worked though, so why wouldn't I accept it? – Shamoon Jul 14 '20 at 13:15
  • 1
    @Shamoon it works only by chance. post the same code inside an empty html file and try. This answer is far from doing what you want. Or even check the jSfiddle shared by @ Turnip – Temani Afif Jul 14 '20 at 13:17