Bruk av strukturelle og funksjonelle pseudoklasser
Pseudo-klasser gjør det mulig å målrette elementer presist basert på deres rekkefølge innenfor en beholder. La oss se nærmere på noen av de mest brukte.
:first-child
Pseudo-klassen :first-child målretter et element som er det første barnet til sin forelder, uavhengig av tag eller klassenavn. La oss se på et eksempel for å tydeliggjøre dette. Vi har et sett med elementer, og kun for det første elementet (det første <li>-elementet) ønsker vi å sette color-egenskapen til blue.
index.html
styles.css
Utdata
Kun det første FAQ-elementet ble valgt, og spesifikke stiler ble brukt.
:last-child
Pseudo-klassen :last-child retter seg mot det siste barnet til sin forelder, og gjør det mulig å endre alle dets egenskaper. La oss se på et eksempel for å illustrere hvordan vi kan bruke denne pseudo-klassen effektivt.
index.html
styles.css
Utdata
:nth-child
Pseudo-klassen :nth-child gjør det mulig å velge elementer basert på deres posisjon blant søsken. Du kan starte med enkel målretting ved å angi et tall. For eksempel:
index.html
styles.css
Utdata
Accent-stilene ble kun brukt på de valgte elementene (2. og 3.).
Avansert :nth-child
For mer komplekse scenarier kan du bruke formelen an+b for å velge flere elementer basert på deres posisjon. Slik fungerer formelen:
abestemmer repetisjonsmønsteret (f.eks. hver 2., 3. barn, osv.);bangir startpunkt eller forskyvning for utvalget;nfungerer som telleren som øker for hver iterasjon, og starter på 0.
La oss se på noen typiske selektorer.
/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
/* Styles for every second element */
}
/* Selects the first three elements */
.item:nth-child(-n + 3) {
/* Styles for the first three elements */
}
/* Selects all odd elements */
.item:nth-child(odd) {
/* Styles for all odd elements */
}
/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
/* Styles for the last three elements */
}
Merk
Det er ikke nødvendig å huske alle selektorene. Det er alltid mulig å søke etter dem på Google.
:not()
Pseudo-klassen :not() retter seg mot elementer som ikke samsvarer med en spesifisert selektor. For eksempel vil :not(p) velge alle elementer unntatt <p>-elementer. La oss se på noen eksempler:
index.html
index.css
1. Hvilken pseudoklasse kan brukes for å velge det første elementet i en gruppe elementer?
2. Hva brukes pseudoklassen nth-child til?
3. Hvordan fungerer pseudoklassen last-child?
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you explain how the :not() pseudo-class works with multiple selectors?
Could you provide more examples of using :not() in CSS?
What are some common use cases for the :not() pseudo-class?
Awesome!
Completion rate improved to 2.56Bruk av strukturelle og funksjonelle pseudoklasser
Sveip for å vise menyen
Pseudo-klasser gjør det mulig å målrette elementer presist basert på deres rekkefølge innenfor en beholder. La oss se nærmere på noen av de mest brukte.
:first-child
Pseudo-klassen :first-child målretter et element som er det første barnet til sin forelder, uavhengig av tag eller klassenavn. La oss se på et eksempel for å tydeliggjøre dette. Vi har et sett med elementer, og kun for det første elementet (det første <li>-elementet) ønsker vi å sette color-egenskapen til blue.
index.html
styles.css
Utdata
Kun det første FAQ-elementet ble valgt, og spesifikke stiler ble brukt.
:last-child
Pseudo-klassen :last-child retter seg mot det siste barnet til sin forelder, og gjør det mulig å endre alle dets egenskaper. La oss se på et eksempel for å illustrere hvordan vi kan bruke denne pseudo-klassen effektivt.
index.html
styles.css
Utdata
:nth-child
Pseudo-klassen :nth-child gjør det mulig å velge elementer basert på deres posisjon blant søsken. Du kan starte med enkel målretting ved å angi et tall. For eksempel:
index.html
styles.css
Utdata
Accent-stilene ble kun brukt på de valgte elementene (2. og 3.).
Avansert :nth-child
For mer komplekse scenarier kan du bruke formelen an+b for å velge flere elementer basert på deres posisjon. Slik fungerer formelen:
abestemmer repetisjonsmønsteret (f.eks. hver 2., 3. barn, osv.);bangir startpunkt eller forskyvning for utvalget;nfungerer som telleren som øker for hver iterasjon, og starter på 0.
La oss se på noen typiske selektorer.
/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
/* Styles for every second element */
}
/* Selects the first three elements */
.item:nth-child(-n + 3) {
/* Styles for the first three elements */
}
/* Selects all odd elements */
.item:nth-child(odd) {
/* Styles for all odd elements */
}
/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
/* Styles for the last three elements */
}
Merk
Det er ikke nødvendig å huske alle selektorene. Det er alltid mulig å søke etter dem på Google.
:not()
Pseudo-klassen :not() retter seg mot elementer som ikke samsvarer med en spesifisert selektor. For eksempel vil :not(p) velge alle elementer unntatt <p>-elementer. La oss se på noen eksempler:
index.html
index.css
1. Hvilken pseudoklasse kan brukes for å velge det første elementet i en gruppe elementer?
2. Hva brukes pseudoklassen nth-child til?
3. Hvordan fungerer pseudoklassen last-child?
Takk for tilbakemeldingene dine!
