How Can I Style the First Occurrence of a Specific HTML Element Across the Entire Document?

Matching the First/Nth Element of a Certain Type in the Entire Document

Problem:
How can we apply CSS styles to the first occurrence of a specific HTML element, regardless of its location in the document?

CSS Solution:
Unfortunately, CSS alone cannot achieve this. The :first-of-type pseudo-class only applies to elements that are the first of their type within their parent element.

JavaScript Solution: querySelector()
Using JavaScript, we can leverage the querySelector() method to identify and manipulate elements in the document. For example, to style the first p element in the document:

document.querySelector('p').className  = ' first-of-type';<br>

This code adds the class 'first-of-type' to the first p element, which can then be styled using the following CSS rules:

p.first-of-type {<br>  background: pink;<br>}<br>

Conclusion:
While it's not possible in CSS alone, using JavaScript's querySelector() method provides a flexible solution for matching and styling the first/nth element of a specific type in the entire document.

The above is the detailed content of How Can I Style the First Occurrence of a Specific HTML Element Across the Entire Document?. For more information, please follow other related articles on the PHP Chinese website!