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!

source：php.cn

Previous article：How to Rotate Text in HTML Table Cells Using CSS Transforms? Next article：Flex, Box, or Flexbox: Which Display Value Should You Use?

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

Latest Articles by Author

Latest Issues

function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...

From 2024-04-29 11:01:01

0

2

1693

How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?

From 2024-04-23 00:22:19

0

10

1856

The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.

From 2024-04-19 15:37:47

0

1

1570

There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...

From 2024-04-18 23:52:34

0

1

1478

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1528

Related Topics

More>

• What are the network security technologies?
• What exchange is Sols Inscription Coin on?
• Cause of blue screen
• what is vuex
• Introduction to the usage of vbs whole code
• Window switching shortcut keys
• How to lock screen on oppo11
• Introduction to standard tags in php