search
HomeWeb Front-endCSS TutorialCSS3 first-child selector practical code

This article mainly introduces the practical strategy of CSS3 first-child selector, including the difference between first-child and :first-of-child as well as the IE compatibility issues For explanation, friends who need it can refer to

:first-child

Selector in CSS to select the first group of objects (same parent) of a specific element
HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<hr>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

CSS

// 只套用编号 1 的 li   
li:first-child {   
    color: green;   
}

##The difference between first-child and: first-of-child
Suppose we have a piece of HTML code like this:

<p>
    <p>第1个元素</p>
    <h1 id="第-个元素">第2个元素</h1>
    <span>第3个元素</span>
    <span>第4个元素</span>
</p>

CSS selector:We want to find the elements in it. If we use the following
DefinitionMethod——p:first-child matches the p element, because the p element is the first child element of p;
h1:first-child does not match any element , because here h1 is the second child element of p, not the first;
span:first-child cannot match any element, because neither span element here is the first child element of p;
:first-child matches the p element, because the first child element of p here is p.
The above
applies styles, two of which cannot be matched, but don’t panic, CSS also defines: first-of-childpseudo-class, please look at it Usage and explanation: p
:first-of-type matches the p element, because p is the first of all p's child elements. In fact, there are only A child element of p; h1:first-of-type matches the h1 element, because h1 is the first of all h1 child elements of p. In fact, there is only one h1 here. Child element;
span:first-of-type matches the third child element span. Here p has two child elements that are spans, and the first one is matched.
:first-of-type matches the p element

Summary: :first-child matches the first child element of a parent element, which can be said to be a structure the first child element on.
:first-of-type matches the first one of the type. What does the type refer to? It is what is matched before the colon. For example, p:first-of-type refers to the first of all p elements. one. There is no limit to the first child element here, as long as it is the first element of this type. Of course, the scope of these elements all belong to the same level, that is, peers.
The same type of selectors :last-child and
:last-of-type, :nth-child(n) and :nth-of-type(n) can also be understood in this way.


Compatibility issues with IE
First look at the following piece of code, HTML part:

<ul class="example">
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
</ul>

CSS part:


.example li{float:left;margin-left:10px;}

If you need to set the margin-left of the first li to 0px, you can do it through the following method:


.example li{float:left;margin-left:10px;}   
.example li:first-child{margin-left:0;}

However, IE6 does not support the :child-first method, so we need to use

expressions To achieve that IE6 also supports :child-first, the code is as follows:

.example li{float:left; margin-left:10px; _margin-left:expression(this.previousSibling==null?&#39;0px&#39;:&#39;10px&#39;);}   
.example li:first-child{margin-left:0;}

Of course, we can also add a

class to the first li to redefine the margin-left. If it is a static page, this is okay. If it is a program If loop is needed to output li, it would be better to use child-first, which at least allows the program to make one less judgment.


The above is the detailed content of CSS3 first-child selector practical code. For more information, please follow other related articles on the PHP Chinese website!

Statement
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
How much specificity do @rules have, like @keyframes and @media?How much specificity do @rules have, like @keyframes and @media?Apr 18, 2025 am 11:34 AM

I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?

Can you nest @media and @support queries?Can you nest @media and @support queries?Apr 18, 2025 am 11:32 AM

Yes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS.

Quick Gulp Cache BustingQuick Gulp Cache BustingApr 18, 2025 am 11:23 AM

You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser

In Search of a Stack That Monitors the Quality and Complexity of CSSIn Search of a Stack That Monitors the Quality and Complexity of CSSApr 18, 2025 am 11:22 AM

Many developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have

Datalist is for suggesting values without enforcing valuesDatalist is for suggesting values without enforcing valuesApr 18, 2025 am 11:08 AM

Have you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what is for. There are lots of

Front Conference in ZürichFront Conference in ZürichApr 18, 2025 am 11:03 AM

I'm so excited to be heading to Zürich, Switzerland for Front Conference (Love that name and URL!). I've never been to Switzerland before, so I'm excited

Building a Full-Stack Serverless Application with Cloudflare WorkersBuilding a Full-Stack Serverless Application with Cloudflare WorkersApr 18, 2025 am 10:58 AM

One of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details

Creating Dynamic Routes in a Nuxt ApplicationCreating Dynamic Routes in a Nuxt ApplicationApr 18, 2025 am 10:53 AM

In this post, we’ll be using an ecommerce store demo I built and deployed to Netlify to show how we can make dynamic routes for incoming data. It’s a fairly

See all articles

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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

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