Select the specific element only if it is followed by no other siblings

Question

Select the specific element only if it is followed by no other siblings

I am puzzled by the following HTML markup and CSS 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 am trying to target the .target element, only if it is the last one within its container.

The use of the :last-of-type class seems to work in this scenario, but I find it confusing. Shouldn't it apply to both .target elements? After all, they are the only and last elements within their respective parent containers. Am I misunderstanding the purpose of the :last-of-type selector?

css css-selectors

Answer 1

Answer №1

:last-of-type doesn't target the class itself, but rather focuses on the type, meaning the tag of the element.

This is why it only affects the last element within the second container div, applying the style when the .target also happens to be the :last-of-type, which in this case is the last div inside its container.

I've made some adjustments to your code sample, try it out with either the .item class or directly targeting the div tag 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>

Answer 2

:last-of-type doesn't target the class itself, but rather focuses on the type, meaning the tag of the element.

This is why it only affects the last element within the second container div, applying the style when the .target also happens to be the :last-of-type, which in this case is the last div inside its container.

I've made some adjustments to your code sample, try it out with either the .item class or directly targeting the div tag 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>

Select the specific element only if it is followed by no other siblings

Answer №1

Similar questions

The styling of the first column in this row will be different from the rest

Having trouble getting the CSS transition effect to work properly

Troubleshooting Problem with CSS3 Transition Rotation

Issue: Unable to interact with a checkbox using Selenium and Python due to element visibility problem

Enhance the functionality of your website by implementing a zoom feature

Exploring the world of CSS: accessing style attributes using JavaScript

Show the Select component in a grid format with a list view, displaying three items per row

Creating a mouse-resistant div with a magnet-like effect

Switching the Focus in Laravel Layouts

Adjust the size of the Vimeo video to fit the container dimensions and eliminate any black bars

Identify whether the page is being accessed through the Samsung stock browser or as an independent web application

Steps to import shared CSS using Styled-components

I am a beginner in using Bootstrap and I am currently working on creating a navigation bar. However, despite inputting the correct code, the navigation bar does not seem to show up on

Adjust the placement of the fixed header waypoint or change its offset

Prevent Bootstrap 5 input fields from automatically adjusting to the height of a CSS grid cell

Is there a way to modify the font color in Chrome when the input autofill feature is active?

The margin set in Bootstrap isn't making any difference

Tips for Moving an h1 Tag to the Beginning of a Div

Python script encounters issue with clicking button within Tor Browser using Firefox

Exploring the Matrix Filter Functionality in JavaScript