How Can I Style the First Instance of a Specific Element Type Across an Entire HTML Document?

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

Styling the first element of a specific type across an entire HTML document can be a challenge using CSS alone. The :first-of-type pseudo-class is limited to matching the first element of a type within its parent element.

---

JavaScript Solutions

:first-of-type

To achieve document-wide matching of the first element of a type, a JavaScript solution is necessary.

We can use document.querySelector() to select the first matching element in the entire document and apply a custom class to it, which can then be styled with CSS.

<p></p><p>The following CSS will then style the first paragraph with the added class:</p><p></p><pre class="brush:php;toolbar:false">  background: pink;<br>}

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