Pseudo-Klasse von Nth child CSS - dies ist eines der nützlichsten und funktionalsten Werkzeuge, mit dem Sie Elemente basierend auf ihrer Position im übergeordneten Container auswählen können. Mit dieser Pseudo-Klasse können Sie Stile mithilfe von mathematischen Formeln und Zählern auf ein bestimmtes untergeordnetes Element oder eine Gruppe von Elementen anwenden.
Die Arbeit der Pseudoklasse Nth child CSS basiert auf dem Konzept des Index eines Elements relativ zum übergeordneten Container. Der Index beginnt bei 1 und erhöht sich mit jedem nächsten Element. Wenn Sie beispielsweise Stile auf jedes dritte Element anwenden möchten, können Sie die Pseudoklasse Nth child mit dem Argument "3n" verwenden. Dies bedeutet, dass die Stile auf alle Elemente angewendet werden, deren Indizes ohne Rest durch 3 geteilt werden.
Die Pseudo-Klasse von Nth child CSS hat eine breite Palette von Anwendungen. Sie können damit ein Raster erstellen, jedes zweite oder dritte Element auswählen und verschiedene Stile auf verschiedene Elemente anwenden, abhängig von ihrer Sequenznummer. Dies ist sehr praktisch, wenn Sie Galerien, Tabellen oder Listen erstellen, in denen Sie bestimmte Elemente auswählen oder verschiedene Stile auf sie anwenden möchten.
Pseudo-Klasse von Nth child CSS: Ausführliche Erklärung und Anwendungsbeispiele
Pseudo-Klassensyntax Nth child sieht wie folgt aus:
In dieser Syntax a und b - das sind ganze Zahlen, aber n ist eine Variable, die die Sequenznummer eines Elements darstellt. Es ist auch erwähnenswert, dass das Konto bei 1 beginnt.
p:nth-child(2n+1)
In diesem Beispiel werden alle ungeraden Elemente ausgewählt die Eigenschaft wird auch im Dokument angewendet color: red;. Zum Beispiel, wenn wir das folgende Markup haben:
Это первый элемент
Это второй элемент
Это третий элемент
Это четвертый элемент
Dann haben nur das erste und das dritte Element eine rote Textfarbe.
Pseudo-Klasse Nth child kann auch mit Schlüsselwörtern ergänzt werden even und odd. In diesem Fall werden nur gerade oder ungerade Elemente ausgewählt. Zum Beispiel:
p:nth-child(even)
Dieser Code wird den Hintergrund der Farbe anwenden lightgray zu jedem geraden Element .
Pseudo-Klasse Nth child kann nützlich sein, wenn Sie eine Liste, eine Tabelle und andere Strukturen formatieren, in denen Sie bestimmte Elemente basierend auf ihrer Sequenznummer auswählen müssen.
Syntax und grundlegende Funktionalität
Mit der Pseudo-Klasse Nth child CSS können Sie Elemente basierend auf ihrer Position im übergeordneten Container auswählen. Die Syntax dieser Pseudoklasse besteht aus dem Schlüsselwort "nth-child" und einem Argument in Klammern, das angibt, welche Elemente ausgewählt werden sollen.
Die vollständige Syntax lautet wie folgt: nth ist child(an+b) , wobei a und b ganze Zahlen oder das Schlüsselwort "odd" oder "even" sind.
| Argument | Die Beschreibung | Ein Beispiel |
|---|---|---|
| an+b | Wählt jedes n-te Element aus, beginnend mit b . | :nth-child(2n+1) wählt alle ungeraden Elemente aus. |
| odd | Wählt alle ungeraden Elemente aus. | :nth-child(odd) wählt alle ungeraden Elemente aus. |
| even | Wählt alle geraden Elemente aus. | :nth-child(even) wählt alle geraden Elemente aus. |
Einige Beispiele für die Verwendung der Pseudo-Klasse Nth child CSS:
// Выбор первого элемента в контейнере.container :nth-child(1) // Выбор каждого третьего элемента, начиная с второго.container :nth-child(3n+2) // Выбор каждого нечетного элемента.container :nth-child(odd) Abrufen von Elementen mithilfe von Indizes
Wenn Sie beispielsweise jedes dritte Element auswählen müssen, können Sie den Ausdruck 3n verwenden. Wenn Sie jedes zweite Element auswählen müssen, beginnend mit dem zweiten, müssen Sie den Ausdruck 2n+2 verwenden.
Die Indexierung von Elementen beginnt bei 1. Dies bedeutet, dass das erste Element einen Index von 1 hat, das zweite Element einen Index von 2 und so weiter.
Im Folgenden finden Sie einige Beispiele, die Ihnen helfen, besser zu verstehen, wie Sie mit Indizes arbeiten, wenn Sie die Pseudo-Klasse ::nth-child() verwenden.
Beispiele für die Verwendung der Pseudoklasse Nth child
Mit der Pseudo-Klasse Nth child in CSS können Sie Elemente basierend auf ihrer Position im übergeordneten Container auswählen. Dies ist sehr praktisch für das Styling von Elementen, wenn Sie unterschiedliche Stile auf verschiedene Elemente anwenden möchten, abhängig von ihrer Sequenznummer.
Hier sind einige Beispiele für die Verwendung der Pseudo-Klasse Nth child:
1. Jedes zweite Element auswählen:
p:nth-child(2n)
In diesem Beispiel sind alle zweiten Elemente
sie werden einen hellgrauen Hintergrund haben.
2. Jedes dritte Element nach dem zweiten hervorheben:
p:nth-child(3n+2)
In diesem Fall folgt jedes dritte Element nach dem zweiten
wird einen gelben Hintergrund haben. Auf diese Weise wird das Styling auf alle Elemente mit den Indizes 2, 5, 8 und so weiter angewendet.
3. Nur die ersten N Elemente stylen:
p:nth-child(-n+3)
Nur die ersten drei Elemente werden hier stilisiert
. Ein negativer Wert (-n) zeigt den Anfang der Zählung am Ende an, sodass in diesem Fall die ersten drei Elemente ausgewählt werden.
Dies sind nur einige Beispiele für die Verwendung der Pseudo-Klasse Nth child. Es bietet eine breite Palette von Möglichkeiten, Elemente basierend auf ihrer Reihenfolge im übergeordneten Container zu stylen.
Pseudo-Klasse Nth child und verwandte Selektoren
Die Pseudo-Klasse :nth-child in CSS ermöglicht es Ihnen, Elemente basierend auf ihrer Sequenznummer innerhalb des übergeordneten Elements auszuwählen. Es ist einer von vielen verwandten Selektoren, mit denen Sie Elemente basierend auf ihrer Beziehung zu anderen Elementen auswählen können.
Die Syntax des :nth-child-Selektors lautet wie folgt:
:nth-child(an + b)Wobei an + b eine Formel ist, die die Sequenznummern der Elemente definiert, die wir auswählen möchten. Die Variablen a und b können ganze Zahlen oder Schlüsselwörter wie odd , even oder n sein . In der Formel an + b stellt n die Sequenznummer des Elements dar, beginnend bei 0.
- :nth-child(2n) - wählt jedes zweite Element innerhalb des übergeordneten Elements aus;
- :nth-child(3n + 1) - wählt jedes dritte Element aus, beginnend mit dem ersten Element innerhalb des übergeordneten Elements;
- :nth-child(even) - Wählt alle geraden Elemente innerhalb des übergeordneten Elements aus;
- :nth-child(odd) - Wählt alle ungeraden Elemente innerhalb des übergeordneten Elements aus.
Die Pseudo-Klasse :nth-child kann nützlich sein, wenn Sie Stile basierend auf ihrer Sequenznummer oder Sequenz auf bestimmte Elemente anwenden müssen. Es wird häufig verwendet, um beispielsweise eine alternative Darstellung von Listen- oder Tabellenelementen zu erstellen.
Neben :nth-child gibt es auch andere verwandte Selektoren wie :first-child , :last-child und :nth-last-child . Sie ermöglichen die Auswahl von Elementen basierend auf ihrer Position innerhalb des übergeordneten Elements, unabhängig von ihrer Sequenznummer.
Kombinieren der Pseudoklasse Nth child mit anderen Selektoren
Zum Beispiel können wir eine Pseudo-Klasse von Nth child mit einer Elementklasse oder einem Tag-Selektor kombinieren. Diese Kombination ermöglicht es uns, nur bestimmte Elemente auszuwählen, die einer bestimmten Sequenznummer und einer bestimmten Klasse oder einem bestimmten Tag entsprechen.
Beispiel für das Kombinieren der Pseudoklasse Nth child mit einer Elementklasse:
/* Выбираем каждый второй элемент с классом "example" */.example:nth-child(2n) Dieser Code wählt jedes zweite Element mit der Klasse "example" aus. Wir können anstelle der Klasse "example" einen anderen Selektor verwenden, um Elemente mit einer bestimmten Klasse auszuwählen.
Beispiel für die Verwendung der Kombination der Pseudoklasse Nth child mit einem Tag-Selektor:
/* Выбираем каждый третий элемент внутри родительского контейнера */.parent-container > p:nth-child(3n)
Dieser Code wählt jedes dritte Element aus
, die sich im übergeordneten Container befindet. Wir können stattdessen einen anderen Tag-Selektor verwenden
um Elemente mit einem anderen Tag auszuwählen.
Wenn wir die Pseudoklasse Nth child mit anderen Selektoren kombinieren, können wir komplexere Stichproben erstellen und Stile nur auf bestimmte Elemente anwenden, die die angegebenen Bedingungen erfüllen.
Verwenden der Pseudo-Klasse Nth child zum Formatieren von Tabellen
Die Pseudo-Klasse :nth-child() in CSS ermöglicht es Ihnen, Elemente einer bestimmten Sequenznummer auszuwählen, um Stile auf sie anzuwenden. Diese Pseudo-Klasse kann beim Formatieren von Tabellen sehr nützlich sein, da Sie es einfach macht, verschiedene Stile auf verschiedene Zellen oder Zeilen in einer Tabelle anzuwenden.
Wenn wir beispielsweise eine Tabelle haben, die mehrere Zeilen und Spalten enthält, können wir eine Pseudoklasse verwenden :nth-child(), um die Farbe jeder zweiten Zeile zu ändern oder eine bestimmte Zelle hervorzuheben. Die Nummerierung von Elementen in einer Tabelle beginnt bei 1, wobei das erste Element der Tabelle den Index 1, das zweite Element den Index 2 aufweist und so weiter.
Um einen Stil auf jede zweite Tabellenzeile anzuwenden, können wir die folgende CSS-Regel verwenden:
tr:nth-child(2n)
Diese Regel wählt jede zweite Zeile der Tabelle aus und ändert ihre Hintergrundfarbe in Hellgrau. Wir können auch einen ähnlichen Ansatz anwenden, um Zellen in einer Tabelle zu stylen. Zum Beispiel können wir jede gerade Zelle in einer Zeile markieren:
td:nth-child(2n)
Diese Regel wählt jede gerade Zelle in der Zeile aus und ändert ihre Schriftart in fett.
Die Verwendung der Pseudo-Klasse :nth-child() macht es einfach, die Stile verschiedener Elemente in einer Tabelle zu verwalten, wodurch sie für Benutzer verständlicher und attraktiver werden.
Erstellen einer alternativen Färbung mit der Pseudo-Klasse Nth child
Pseudo-Klasse :nth-child in CSS können Sie bestimmte untergeordnete Elemente im übergeordneten Container auswählen. Diese Klasse ist besonders nützlich, wenn Sie eine alternative Färbung von Elementen auf einer Seite erstellen möchten.
Nehmen wir zum Beispiel an, wir haben eine Liste von Elementen:
- Element 1
- Element 2
- Element 3
- Element 4
- Element 5
Um eine alternative Färbung zu erstellen, können wir eine Pseudoklasse verwenden :nth-child(odd) um ungerade Elemente auszuwählen und einen Stil auf sie anzuwenden, sowie eine Pseudoklasse :nth-child(even) um gerade Elemente auszuwählen und einen anderen Stil auf sie anzuwenden.
Hier ist ein Beispiel für CSS-Code, der diese Aufgabe ausführt:
ul li:nth-child(odd) ul li:nth-child(even)Die ungeraden Listenelemente haben jetzt eine Hintergrundfarbe #f2f2f2 und gerade Elemente - #ccc. Diese Technik kann verwendet werden, um eine interessantere und vielfältigere Färbung von Elementen auf einer Webseite zu erstellen.
Unterstützung für die Pseudo-Klasse Nth child in verschiedenen Browsern
Derzeit wird die Pseudo-Klasse von Nth child in den neuesten Versionen der gängigen Browser, einschließlich Chrome, Firefox, Safari und Edge, vollständig unterstützt. Das bedeutet, dass Sie es ohne Einschränkungen verwenden können und sicher sein können, dass Ihr Code auf den meisten modernen Geräten ordnungsgemäß funktioniert.
Es ist jedoch erwähnenswert, dass ältere Versionen von Internet Explorer (vor IE9) die Pseudo-Klasse Nth child nicht unterstützen. Wenn Sie Unterstützung für diese Browserversionen benötigen, müssen Sie alternative Methoden oder JavaScript verwenden, um das gewünschte Ergebnis zu erzielen.
Wenn Sie sicher sein möchten, dass Ihr Code in allen modernen Browsern funktioniert, sollten Sie ihn in verschiedenen Browsern und Geräten auf Kompatibilität überprüfen. Dazu können Sie Browser-Entwicklertools oder Online-Dienste verwenden, um die Kompatibilität zu testen.
| Browser | Version | Unterstützung für Nth child |
|---|---|---|
| Chrome | Letzter | Ja |
| Firefox | Letzter | Ja |
| Safari | Letzter | Ja |
| Edge | Letzter | Ja |
| Internet Explorer | Bis 9 | Nein |
Zusammenfassung
Diese Pseudo-Klasse wird häufig verwendet, um verschiedene Elemente in einer Liste, Tabelle oder einer anderen Gruppe von Elementen zu stylen und zu definieren. Damit können Sie den Hintergrund, die Schriftart oder andere Eigenschaften von Elementen, die der ausgewählten Position entsprechen, einfach ändern.
Zum Beispiel können Sie die Pseudo-Klasse nth-child verwenden, um jedes zweite oder dritte Element in einer Liste hervorzuheben. Sie können diese Pseudo-Klasse auch mit anderen Selektoren kombinieren, um komplexere Styling-Regeln zu erstellen.
Beachten Sie jedoch, dass sich diese Pseudoklasse auf ein bestimmtes übergeordnetes Element bezieht, sodass sich ihr Verhalten je nach Struktur und Hierarchie der Elemente auf der Seite ändern kann.
| Vorteile | Nachteile |
|---|---|
| Einfach zu bedienen | Begrenzte Unterstützung in älteren Browserversionen |
| Ermöglicht die einfache Auswahl und Stilisierung von Elementen | Kann bei komplexen Seitenstrukturen zu Komplexität führen |
| Flexibilität bei der Auswahl der Elementposition | Erfordert ein gewisses Maß an CSS- und HTML-Strukturkenntnissen |
Als Ergebnis ist die Pseudo-Klasse von nth-child CSS ein effektives Werkzeug, um Elemente auf einer Webseite selektiv zu stylen. Es bietet eine flexible Möglichkeit, Elemente auszuwählen und bietet die Möglichkeit, eine Vielzahl von stilisierten Listen, Tabellen und anderen Elementgruppen zu erstellen. Bei der Verwendung dieser Pseudoklasse ist es jedoch wichtig, die Hierarchie und Struktur der Elemente auf der Seite zu berücksichtigen, um unvorhersehbare Ergebnisse zu vermeiden.
