Le premier enfant, un sélecteur CSS (first-child), permet d'appliquer le style du premier élément directement à l'autre élément. Selon la spécification CSS Selectors Level 3, on parle de pseudo-classe structurelle car elle base le style de tout contenu sur la façon dont il se rapporte à son contenu parent et frère.
Syntaxe
:first-child { //property } Exemple
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> Sortir
en ordre
Explication:
- Deux balises div composent le bloc body dans le code ci-dessus.
- Il existe de nombreuses balises de paragraphe
avec diverses balises snap à l’intérieur du premier élément div.
- Une balise d'en-tête et une balise de paragraphe
avec une balise snap sont tous deux inclus dans l’autre balise div.
- Nous avons appliqué du CSS interne ou intégré à l'intérieur du bloc d'en-tête et stylisé la balise snap dans la balise de paragraphe. Cependant, nous ne sommes pas obligés de créer une classe pour la balise snap ; à la place, nous pouvons utiliser le premier sélecteur enfant (p:first-child) pour identifier instantanément le premier élément de balise snap à l'intérieur de la première balise div. Nous pouvons donner du style à l’élément initial (snap). Il y a deux balises snap dans le paragraphe, mais comme nous pouvons le voir, seule la première balise est stylisée et les autres ont été ignorées.
- Nous pouvons voir comment le premier enfant a recherché la première balise snap et l'a stylisée dans la deuxième balise div. L'élément doit être le premier élément parmi ses frères et sœurs à l'intérieur de la balise parent à être ciblé par le premier enfant ; sinon, il ne sera pas choisi.
En utilisant leBalise de ligne
Utilisation de la balise de ligne
Syntaxe
tr:first-child{ //CSS declarations with style properties; } Exemple
Pour une meilleure compréhension, regardons un exemple du premier CSS enfant utilisant la balise row
chaîne pour discuter
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> Sortir
Explication:
- Le bloc de corps du code ci-dessus contient des balises de tableau pour les informations sur l'étudiant.
.
- Il y a plusieurs rangées de balises
à l'intérieur de la balise de table , et l'étiquette de la première rangée comporte des en-têtes tels que le numéro de matricule, le nom et les notes de l'élève. Les données de l'étudiant sont contenues dans les balises de ligne restantes.
- Pour styliser la balise de ligne
à l'intérieur de la balise de table , nous avons appliqué du CSS interne ou intégré à l'intérieur du bloc head. Cependant, nous ne sommes pas obligés de créer une classe pour la balise row ; au lieu de cela, nous utilisons simplement le premier sélecteur d'enfant (p:first-child), qui reconnaîtra automatiquement l'élément de balise de première ligne directement à l'intérieur de la balise de table. Nous pouvons styliser la balise row, qui est le premier élément. Il y a plusieurs rangées de balises à l’intérieur du tableau. Cependant, comme nous pouvons le voir, la première balise est stylisée tandis que les autres sont ignorées.
Conclusion
Nous avons découvert le premier enfant de CSS dans cet article. Voici une conclusion du premier enfant dans l’article :
- En CSS, le sélecteur premier enfant (:first-child) permet d'appliquer immédiatement le style du premier élément à l'autre élément.
- Le premier enfant stylise le matériel en fonction de son rapport avec le contenu de ses parents et de ses frères et sœurs.
- Une pseudo-classe membre des classes basées sur la position et basées sur la structure est le premier enfant. Sans rechercher d'autres frères et sœurs (éléments) du même type, la première classe tentera de correspondre au premier enfant immédiat du parent.