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?

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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1389
52
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
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?
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
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
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?
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?
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?
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. �...


