The key to using CSS to select the first and last child elements is to understand the usage of pseudo-class selectors. :first-child selects the first child element under the parent element and the label matches. For example, li:first-child acts on the first
<li>; :last-child selects the last child element that matches the label, such as li:last-child acts on the last <li>; if you only want to match the first or last element of the same type, you should use :first-of-type or :last-of-type. Common errors include structural nested interference and HTML inconsistency that cause selector failure, such as when incorporating other tags: first-child may not hit the target. Mastering these key points allows you to apply styles more accurately.
Selecting the first and last child elements is actually quite straightforward to use the CSS selector. You can do it with two pseudo-classes: :first-child and :last-child . But sometimes newbies will confuse their usage, especially when the structure is a little more complicated. Below are a few key points and common situations to help you truly understand how to use them.
How to choose the first child element?
Want to select the first child element in a parent container? Just use :first-child .
For example, you have a structure like this:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
If you want the first <li> to turn into a red font, you can write it like this:
li:first-child {
color: red;
} ?? Note: This selector means "the first child element under its parent element is selected", and it must be that label to take effect. For example, if the first child element is not <li> , then this style will not be applied.
How to choose the last child element?
Similarly, :last-child is used to select the last child element.
Continue with the example above, if you want to bold the last <li> font:
li:last-child {
font-weight: bold;
} In this way, no matter how many <li> there are in <ul> , the last one will be bolded.
But note that both selectors require that the target element must be a direct child element under the parent element and that the type must match. If you just want to select the first or last of all child elements under the parent element, regardless of the type, you can use :first-of-type or :last-of-type .
Where errors are prone to actual use
<ul><li>Parent-son structure nesting interference : Sometimes you think you are choosing the first child element of a certain layer, but because the structure is nested too deeply, you select the wrong object.
<li> Inconsistent HTML structure leads to failure : for example, there is an advertisement <div> in the middle, and at this time :first-child and :last-child may not be the elements you want.
For example:
<div class="container"> <p>Paragraph 1</p> <div class="ad">Advertising slots</div> <p>Paragraph 2</p> </div>
At this time So if you only want to style the first or last of a certain type of tag (such as multiple Basically that's it. Remember one principle: .container p:first-child will only work on the first <p></p> , but if <p></p> is not the first child element, such as the ad <div> is in front of it, then p:first-child will not take effect.
A brief comparison of these commonly used selectors
<ul>
<li> :first-child - must be the first child element of the parent element and the label name must match
<li> :last-child - must be the last child element of the parent element, and the label must also match
<li> :first-of-type — The first element of the same type is not required to be the first child element of the parent element
<li> :last-of-type — the last one of the same type
<p></p> ), it is safer to use of-type .
:first-child and :last-child are picky about position and labels, and of-type is more flexible. When using it, look at the HTML structure and don't rely solely on imagination.
The above is the detailed content of How to select the first and last child element with CSS Selectors?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
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
What is 'render-blocking CSS'?
Jun 24, 2025 am 12:42 AM
CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.
External vs. Internal CSS: What's the Best Approach?
Jun 20, 2025 am 12:45 AM
ThebestapproachforCSSdependsontheproject'sspecificneeds.Forlargerprojects,externalCSSisbetterduetomaintainabilityandreusability;forsmallerprojectsorsingle-pageapplications,internalCSSmightbemoresuitable.It'scrucialtobalanceprojectsize,performanceneed
Does my CSS must be on lower case?
Jun 19, 2025 am 12:29 AM
No,CSSdoesnothavetobeinlowercase.However,usinglowercaseisrecommendedfor:1)Consistencyandreadability,2)Avoidingerrorsinrelatedtechnologies,3)Potentialperformancebenefits,and4)Improvedcollaborationwithinteams.
CSS Case Sensitivity: Understanding What Matters
Jun 20, 2025 am 12:09 AM
CSSismostlycase-insensitive,butURLsandfontfamilynamesarecase-sensitive.1)Propertiesandvalueslikecolor:red;arenotcase-sensitive.2)URLsmustmatchtheserver'scase,e.g.,/images/Logo.png.3)Fontfamilynameslike'OpenSans'mustbeexact.
What is Autoprefixer and how does it work?
Jul 02, 2025 am 01:15 AM
Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.
What are CSS counters?
Jun 19, 2025 am 12:34 AM
CSScounterscanautomaticallynumbersectionsandlists.1)Usecounter-resettoinitialize,counter-incrementtoincrease,andcounter()orcounters()todisplayvalues.2)CombinewithJavaScriptfordynamiccontenttoensureaccurateupdates.
CSS: When Does Case Matter (and When Doesn't)?
Jun 19, 2025 am 12:27 AM
In CSS, selector and attribute names are case-sensitive, while values, named colors, URLs, and custom attributes are case-sensitive. 1. The selector and attribute names are case-insensitive, such as background-color and background-Color are the same. 2. The hexadecimal color in the value is case-sensitive, but the named color is case-sensitive, such as red and Red is invalid. 3. URLs are case sensitive and may cause file loading problems. 4. Custom properties (variables) are case sensitive, and you need to pay attention to the consistency of case when using them.
What is the conic-gradient() function?
Jul 01, 2025 am 01:16 AM
Theconic-gradient()functioninCSScreatescirculargradientsthatrotatecolorstopsaroundacentralpoint.1.Itisidealforpiecharts,progressindicators,colorwheels,anddecorativebackgrounds.2.Itworksbydefiningcolorstopsatspecificangles,optionallystartingfromadefin
