Table of Contents
CSS style settings: accurately locate and modify the first specific class element
I'm h1, just set my style to red
I'm h1
Home Web Front-end CSS Tutorial How to correctly select and set the element style with the first class name 'red' in CSS?

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

Apr 05, 2025 pm 08:24 PM
css Browser Pseudo class selector red

How to correctly select and set the first class name in CSS to

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>
Copy after login
.red:first-child {
  color: red;
}
Copy after login

.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';
Copy after login

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;
}
Copy after login

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;
}
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Using Dicr/Yii2-Google to integrate Google API in YII2 Using Dicr/Yii2-Google to integrate Google API in YII2 Apr 18, 2025 am 11:54 AM

VprocesserazrabotkiveB-enclosed, Мнепришлостольностьсясзадачейтерациигооглапидляпапакробоглесхетсigootrive. LEAVALLYSUMBALLANCEFRIABLANCEFAUMDOPTOMATIFICATION, ČtookazaLovnetakProsto, Kakaožidal.Posenesko

Laravel8 optimization points Laravel8 optimization points Apr 18, 2025 pm 12:24 PM

Laravel 8 provides the following options for performance optimization: Cache configuration: Use Redis to cache drivers, cache facades, cache views, and page snippets. Database optimization: establish indexing, use query scope, and use Eloquent relationships. JavaScript and CSS optimization: Use version control, merge and shrink assets, use CDN. Code optimization: Use Composer installation package, use Laravel helper functions, and follow PSR standards. Monitoring and analysis: Use Laravel Scout, use Telescope, monitor application metrics.

What do laravel read? What's the use? What do laravel read? What's the use? Apr 18, 2025 pm 12:09 PM

Laravel is a PHP development framework for quickly building web applications. Newbie people should start from the official documentation and gradually learn the core concepts of Laravel, such as routing, controller, model and views. Secondly, understand the basics of PHP, database, front-end technology and object-oriented programming. Learn in practice, start with simple projects, and summarize experiences in errors. In addition, with the help of the power of the community, we can get help and share experience from resources such as Stack Overflow, and ultimately continue to learn and practice, becoming a Laravel master.

How to simplify front-end resource compression using Composer: Application of seekgeeks/cssjsminify library How to simplify front-end resource compression using Composer: Application of seekgeeks/cssjsminify library Apr 18, 2025 am 11:18 AM

When developing a website or application, the optimization of front-end resources is one of the keys to improving performance. I'm having a tough problem when working on a project: how to efficiently compress and manage large amounts of CSS and JavaScript files. This is not only to reduce file size, but also helps to improve page loading speed. After trying multiple methods, I found the library seekgeeks/cssjsminify, which simplifies the entire compression process using Composer and greatly improves my development efficiency.

Use Composer to simplify PHP project development: Practical application of pxniu/study library Use Composer to simplify PHP project development: Practical application of pxniu/study library Apr 18, 2025 am 11:06 AM

When developing PHP projects, we often encounter requirements such as frequent operation of databases, management of transactions, and dependency injection. If written manually, these operations are not only time-consuming and labor-intensive, but also prone to errors. Recently, I have encountered similar troubles in my projects, and handling these operations has become extremely complex and difficult to maintain. Fortunately, I found a Composer library called pxniu/study, which greatly simplified my development process. Composer can be learned through the following address: Learning address

How to analyze the cracking process of IntelliJ IDEA and find the lib or class responsible for registration? How to analyze the cracking process of IntelliJ IDEA and find the lib or class responsible for registration? Apr 19, 2025 pm 04:00 PM

Regarding the analysis method of IntelliJIDEA cracking in the programming world, IntelliJ...

How to use the Redis cache solution to efficiently realize the requirements of product ranking list? How to use the Redis cache solution to efficiently realize the requirements of product ranking list? Apr 19, 2025 pm 11:36 PM

How does the Redis caching solution realize the requirements of product ranking list? During the development process, we often need to deal with the requirements of rankings, such as displaying a...

What is the reason why the browser does not respond after the WebSocket server returns 401? How to solve it? What is the reason why the browser does not respond after the WebSocket server returns 401? How to solve it? Apr 19, 2025 pm 02:21 PM

The browser's unresponsive method after the WebSocket server returns 401. When using Netty to develop a WebSocket server, you often encounter the need to verify the token. �...

See all articles