Home >Web Front-end >CSS Tutorial >Why Doesn\'t `.class:last-of-type` Select the Last Element with a Specific Class?

Why Doesn\'t `.class:last-of-type` Select the Last Element with a Specific Class?

Susan Sarandon
Susan SarandonOriginal
2024-10-28 08:06:02485browse

Why Doesn't `.class:last-of-type` Select the Last Element with a Specific Class?

Why Does .class:last-of-type Not Function as Expected?

The .class:last-of-type selector is designed to target the final element of a specific type within a given container, not the final element with a particular class.

In this example:

<code class="css">p{
    display: none;
}
p.visible:last-of-type {
    display: block;
}</code>

The selector is searching for the final

element within each containing element. However, since none of the

elements have the .visible class applied, the selector ultimately selects none of them.

To target the final element with the .visible class, use the following selector instead:

<code class="css">div p:last-of-type.visible {
    display: block;
}</code>

This selector targets the final

element within each

that also possesses the .visible class.

The above is the detailed content of Why Doesn\'t `.class:last-of-type` Select the Last Element with a Specific Class?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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