Target element only if it doesn't have any subsequent siblings

Question

I have the following markup and style:

[class^="container"] .target:last-of-type {
  color:red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container-1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="target">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <br>
  <div class="container-2">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="target">5</div>
  </div>
</body>
</html>

I want to select the .target element, but only if it is the last within its container.

The :last-of-type class works in this case, I just don't understand why. Shouldn't it highlight both .target elements? They are the last-of-type (and only) elements within their parent containers. Or I am misunderstanding the :last-of-type selector?

_“The :last-of-type class works in this case, I just don't understand why”_ – because the element is the last of its type (div) in the parent, and happens to have the class `target` as well. — CBroe, Aug 15 '16 at 15:02
Same problem as [CSS selector for first element with class](http://stackoverflow.com/q/2717480/1529630), but for the last element instead of first one. — Oriol, Aug 15 '16 at 15:10

Juan Ferreras · Accepted Answer · 2016-08-15T15:06:06.983

:last-of-type doesn't look for the class, but rather, as the name implies, the type as in the tag of the element.

That's why it's only highlighting the last element on the second container div, it's applying the rule when the .target becomes also the :last-of-type, that is, the last div inside its container.

I've edited your answer, check what it does when it's either .item or the div tag itself before the last-of-type selector.

[class^="container"] .target:last-of-type {
  color:blue;
}
[class^="container"] .item:last-of-type {
  text-decoration: underline;
}

[class^="container"] div:last-of-type {
  text-indent: 20px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container-1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="target">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <br>
  <div class="container-2">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="target">5</div>
  </div>
</body>
</html>

This makes a lot of sense, like most things, but is so hard to see if you're looking the wrong way! [x-y problem I guess.](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) — Randy, Aug 15 '16 at 15:05
So basically it was selecting all of the children elements (based on tag names, not classes) and then matched them with a single class selector. It is clear now. Thanks! — marchello, Aug 15 '16 at 15:28

Target element only if it doesn't have any subsequent siblings

1 Answers1