Das erste Kind, ein CSS-Selektor (First-Child), ermöglicht es uns, den Stil des ersten Elements direkt auf das andere Element anzuwenden. Gemäß der CSS Selectors Level 3-Spezifikation wird sie als strukturelle Pseudoklasse bezeichnet, da sie den Stil jedes Inhalts auf der Beziehung zu seinem übergeordneten und gleichgeordneten Inhalt basiert.
Syntax
:first-child { //property } Beispiel
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> Ausgabe
Erläuterung:
- Zwei div-Tags bilden den Body-Block im obigen Code.
- Es gibt viele Absatz-Tags
mit verschiedenen Snap-Tags im ersten div-Element.
- Ein Header-Tag und ein Absatz-Tag
mit einem Snap-Tag sind beide im anderen div-Tag enthalten.
- Wir haben internes oder eingebettetes CSS im Kopfblock angewendet und das Snap-Tag im Absatz-Tag gestaltet. Wir sind jedoch nicht verpflichtet, eine Klasse für das Snap-Tag zu erstellen; Stattdessen können wir den ersten untergeordneten Selektor (p:first-child) verwenden, um das erste Snap-Tag-Element innerhalb des ersten div-Tags sofort zu identifizieren. Wir können dem Anfangselement (Snap) etwas Stil verleihen. Es gibt zwei Snap-Tags innerhalb des Absatzes, aber wie wir sehen können, ist nur das erste Tag formatiert und die anderen wurden ignoriert.
- Wir können sehen, wie das erste Kind nach dem ersten Snap-Tag gesucht und es im zweiten Div-Tag gestaltet hat. Das Element muss das erste Element unter seinen Geschwistern innerhalb des übergeordneten Tags sein, das vom ersten untergeordneten Element als Ziel ausgewählt werden soll. Andernfalls wird es nicht ausgewählt.
Verwendung derZeilen-Tag
Verwenden des Zeilen-Tags
Syntax
tr:first-child{ //CSS declarations with style properties; } Beispiel
Schauen wir uns zum besseren Verständnis ein Beispiel für das erste untergeordnete CSS an, das das Zeilen-Tag verwendet
Example of First Child in CSS using row tag tr:first-child { font-size: 40pixels; color: black; background-color: lightblue; } <table class="table"> <tr> <th>Name</th> <th>ID</th> <th>Branch</th> </tr> <tr> <th>Priya</th> <th>123</th> <th>CSE</th> </tr> <tr> <th>John</th> <th>435</th> <th>ECE</th> </tr> <tr> <th>David</th> <th>544</th> <th>MECH</th> </tr> <tr> <th>Sushma</th> <th>765</th> <th>CIVIL</th> </tr> </table> Ausgabe
Erläuterung:
- Der Hauptblock des obigen Codes enthält Tabellen-Tags für die Schülerinformationen
.
- Es gibt mehrere Reihen von Tags
innerhalb des Tabellen-Tags , und das Tag in der ersten Zeile enthält Überschriften wie die Rollennummer, den Namen und die Noten des Schülers. Die Daten des Schülers sind in den verbleibenden Zeilen-Tags enthalten.
- Zum Gestalten des Zeilen-Tags
innerhalb des Tabellen-Tags , wir haben internes oder eingebettetes CSS im Kopfblock angewendet. Es ist jedoch nicht erforderlich, eine Klasse für das Zeilen-Tag zu erstellen; Stattdessen verwenden wir einfach den ersten untergeordneten Selektor (p:first-child), der das Tag-Element der ersten Zeile automatisch direkt im Tabellen-Tag erkennt. Wir können das Zeilen-Tag formatieren, das das erste Element ist. In der Tabelle befinden sich mehrere Zeilen mit Tags. Wie wir jedoch sehen können, wird das erste Tag formatiert, während die übrigen ignoriert werden.
Abschluss
In diesem Artikel haben wir etwas über das erste Kind von CSS erfahren. Hier ist eine Schlussfolgerung des ersten Kindes im Artikel:
- In CSS ermöglicht uns der Selektor für das erste Kind (:first-child), den Stil des ersten Elements sofort auf das andere Element anzuwenden.
- Das erste Kind gestaltet das Material entsprechend seiner Beziehung zu den Inhalten seiner Eltern und Geschwister.
- Eine Pseudoklasse, die Mitglied der positionsbasierten und strukturbasierten Klassen ist, ist das erste Kind. Ohne nach weiteren Geschwistern (Elementen) desselben Typs zu suchen, versucht die erste Klasse, mit dem ersten unmittelbaren Kind des Elternteils übereinzustimmen.