Home > Web Front-end > CSS Tutorial > How to Style the Last Element with a Specific Class in CSS?

How to Style the Last Element with a Specific Class in CSS?

DDD
Release: 2024-12-07 04:27:12
Original
247 people have browsed it

How to Style the Last Element with a Specific Class in CSS?

Addressing CSS Rules to the Last Element with a Specific Class:

In CSS, selecting the last element of a particular type is straightforward using the :last-of-type pseudo-class. However, applying this pseudo-class to a specific class is not natively supported.

Consider the following scenario:

div:last-of-type {
  margin-right: 0;
}
Copy after login

While this code successfully addresses the last div element in a group, it does not consider any applied classes.

To achieve the desired result, a class must be incorporated into the selector:

div.class:last-of-type {
  margin-right: 0;
}
Copy after login

Regrettably, this CSS syntax is not recognized by browsers. The :last-of-type pseudo-class is limited to selecting elements based on their type, not their class.

Alternative Solutions:

  • JavaScript: Implement a JavaScript function to dynamically identify and modify the required CSS rules based on class names.
  • Markup/CSS Revision: Re-structure your markup or CSS to work around this limitation, ensuring that the last element with the specified class has a unique identifier.

The above is the detailed content of How to Style the Last Element with a Specific Class in CSS?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template