Why Doesn\'t `p.visible:last-of-type` Target the Last Visible Paragraph Element?

:last-of-type Selector Behavior

The :last-of-type pseudo-class targets the last element of a specified type within a parent container. However, in the context of your CSS selector (p.visible:last-of-type), it's important to note that :last-of-type solely applies to element types and not class instances.

In your HTML markup:

<code class="html"><div>
  <p class="visible">This should be hidden</p>
  <p class="visible">This should be displayed</p>
  <p>This should be hidden</p>
</div></code>

The issue arises because :last-of-type targets the last

element, which in this case does not have the .visible class. Consequently, none of your

elements are visible.

Solution

To target the last

element with the .visible class, you must use JavaScript, as there is no built-in CSS selector for this specific purpose.

The above is the detailed content of Why Doesn\'t `p.visible:last-of-type` Target the Last Visible Paragraph Element?. For more information, please follow other related articles on the PHP Chinese website!