How to select and style elements of the first specific class using CSS and JavaScript?

Precisely manipulate CSS and JavaScript: Style the first specific class element

In web development, it is often necessary to style the first element of a specific category. For example, the page has multiple elements with class="red" but only the first element is expected to appear in red. This article will demonstrate how to achieve this using CSS and JavaScript.

HTML structure example:

The following HTML code contains multiple class="red" elements:

<div id="test">
  <span>I'm span</span>
  <h1 id="I-m-h-just-set-my-style-to-red">I'm h1, just set my style to red</h1>
  <h1 id="I-m-h">I'm h1</h1>
  <h1 id="I-m-h">I'm h1</h1>
  <h1 id="I-m-h">I'm h1</h1>
</div>

Method 1: JavaScript implementation

JavaScript's document.querySelector() method can easily select the first matching element. The following code sets the color of the first class="red" element to red:

 document.querySelector('.red').style.color = 'red';

Method 2: CSS implementation

The :nth-child() pseudo-class selector of CSS can be selected according to the order of elements. Combined with the of keyword, the first element in a specific class can be selected accurately.

 .red:nth-child(1 of .red) {
  color: red;
}

To style the last class="red" element, you can use the :nth-last-child() pseudo-class:

 .red:nth-last-child(1 of .red) {
  color: blue;
}

Compatibility Description: It should be noted that :nth-child(n of selector) and :nth-last-child(n of selector) may have some problems with browser compatibility. In some older browsers, this method may not work properly. Therefore, which method to choose depends on the project's browser compatibility requirements. If compatibility is critical, JavaScript methods are generally more reliable.

Summary: Both JavaScript and CSS can implement the style setting of the first element of a specific class. Developers should choose the most appropriate method based on actual project requirements and browser compatibility considerations.

The above is the detailed content of How to select and style elements of the first specific class using CSS and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!