Lära Använda Strukturella och Funktionella Pseudoklasser

Pseudo-klasser gör det möjligt att rikta in sig på element exakt baserat på deras ordning inom en behållare. Låt oss utforska några av de mest använda.

:first-child

Pseudo-klassen :first-child riktar in sig på ett element som är det första barnet till sin förälder, oavsett tagg eller klassnamn. Låt oss titta på följande exempel för att förtydliga. Vi har en uppsättning element, och endast för det första elementet (det första <li>-elementet) vill vi sätta dess color-egenskap till blue.

index.html

styles.css

Utdata

Endast det första FAQ-elementet valdes och specifika stilar tillämpades.

:last-child

Pseudo-klassen :last-child riktar sig mot det sista barnet till sin förälder, vilket gör det möjligt att ändra valfria egenskaper. Låt oss titta på ett exempel för att illustrera hur denna pseudo-klass kan användas effektivt.

index.html

styles.css

Utdata

:nth-child

Pseudo-klassen :nth-child gör det möjligt att välja element baserat på deras position inom en lista av syskonelement. Du kan börja med enkel selektering genom att ange ett nummer. Till exempel:

index.html

styles.css

Utdata

Accentstilarna tillämpades endast på de valda elementen (2:a och 3:e).

Avancerad :nth-child

För mer komplexa scenarier kan du använda formeln an+b för att välja flera element baserat på deras position. Så här fungerar formeln:

a bestämmer repetitionsmönstret (t.ex. varannan, var tredje barn osv.);
b anger startpunkten eller offset för urvalet;
n fungerar som räknare som ökar vid varje iteration, med start från 0.

Låt oss titta på några vanliga 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 */
}

Observera

Det är inte nödvändigt att memorera alla selektorer. Det går alltid att söka efter dem på Google.

:not()

Pseudo-klassen :not() riktar in sig på element som inte matchar en angiven selektor. Till exempel skulle :not(p) välja alla element utom <p>-element. Låt oss titta på några exempel:

index.html

index.css

1. Vilken pseudoklass kan användas för att välja det första elementet i en uppsättning av element?

2. Vad används pseudoklassen `nth-child` till?

3. Hur fungerar pseudoklassen `last-child`?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 5

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 2.56

Svep för att visa menyn

Pseudo-klasser gör det möjligt att rikta in sig på element exakt baserat på deras ordning inom en behållare. Låt oss utforska några av de mest använda.

:first-child

index.html

styles.css

Utdata

Endast det första FAQ-elementet valdes och specifika stilar tillämpades.

:last-child

index.html

styles.css

Utdata

:nth-child

index.html

styles.css

Utdata

Accentstilarna tillämpades endast på de valda elementen (2:a och 3:e).

Avancerad :nth-child

För mer komplexa scenarier kan du använda formeln an+b för att välja flera element baserat på deras position. Så här fungerar formeln:

a bestämmer repetitionsmönstret (t.ex. varannan, var tredje barn osv.);
b anger startpunkten eller offset för urvalet;
n fungerar som räknare som ökar vid varje iteration, med start från 0.

Låt oss titta på några vanliga 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 */
}

Observera

Det är inte nödvändigt att memorera alla selektorer. Det går alltid att söka efter dem på Google.

:not()

Pseudo-klassen :not() riktar in sig på element som inte matchar en angiven selektor. Till exempel skulle :not(p) välja alla element utom <p>-element. Låt oss titta på några exempel:

index.html

index.css

1. Vilken pseudoklass kan användas för att välja det första elementet i en uppsättning av element?

2. Vad används pseudoklassen `nth-child` till?

3. Hur fungerar pseudoklassen `last-child`?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 5

Använda Strukturella och Funktionella Pseudoklasser

:first-child

Utdata

:last-child

Utdata

:nth-child

Utdata

Avancerad :nth-child

:not()

1. Vilken pseudoklass kan användas för att välja det första elementet i en uppsättning av element?

2. Vad används pseudoklassen nth-child till?

3. Hur fungerar pseudoklassen last-child?

Awesome!

Använda Strukturella och Funktionella Pseudoklasser

:first-child

Utdata

:last-child

Utdata

:nth-child

Utdata

Avancerad :nth-child

:not()

1. Vilken pseudoklass kan användas för att välja det första elementet i en uppsättning av element?

2. Vad används pseudoklassen nth-child till?

3. Hur fungerar pseudoklassen last-child?

2. Vad används pseudoklassen `nth-child` till?

3. Hur fungerar pseudoklassen `last-child`?

2. Vad används pseudoklassen `nth-child` till?

3. Hur fungerar pseudoklassen `last-child`?