How to correctly select and set the element style with the first class name 'red' in CSS?

CSS style settings: accurately locate and modify the first specific class element

In web development, we often need to style elements of specific class names. This article will focus on how to modify only the style of the first element on the page with a specific class name. For example, how to set the text color of the element with the first class name "red" in the page to red.

Here is a common misunderstanding:

<div id="test">
  <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>

.red:first-child {
  color: red;
}

.red:first-child selector does not achieve the expected effect because it only selects the first child element of the parent element, not the first element that owns the .red class.

So, how to implement it correctly?

Method 1: Use JavaScript

JavaScript's querySelector method can accurately locate:

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

This method directly operates DOM elements, which is simple and efficient.

Method 2: Using CSS's :nth-child pseudo-class selector

CSS provides a more elegant solution: nth-child pseudo-class selector. nth-child(n of .red) selector can select the nth element with the class name ".red". To select the first one, use :nth-child(1 of .red) :

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

Similarly, nth-last-child(1 of .red) can select the last element with the class name ".red":

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

Compatibility Tips: There may be differences in browser compatibility of nth-child(n of .red) selector, and it is recommended to test it before actual application.

Through the above two methods, we can accurately select and set the style of the first specific class name element, thereby achieving more flexible web style control. Which method to choose depends on the specific requirements of the project and the degree of dependence on JavaScript.

The above is the detailed content of How to correctly select and set the element style with the first class name 'red' in CSS?. For more information, please follow other related articles on the PHP Chinese website!