<h2>Matching the First Element of a Certain Type in the Entire Document</h2>

<p>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.</p>

<h2>JavaScript Solutions</h2>

<h3>:first-of-type</h3>

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

<p>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>

<pre>

<p>The following CSS will then style the first paragraph with the added class:</p>

<pre> background: pink;
}</pre>