Het eerste kind, een CSS-selector (eerste kind), stelt ons in staat de stijl van het eerste element rechtstreeks op het andere element toe te passen. Volgens de CSS Selectors Level 3-specificatie wordt er naar verwezen als een structurele pseudo-klasse, omdat deze de stijl van inhoud baseert op hoe deze zich verhoudt tot de bovenliggende en verwante inhoud.
Syntaxis
:first-child { //property } Voorbeeld
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> Uitvoer
Uitleg:
- Twee div-tags vormen het body-blok in de bovenstaande code.
- Er zijn veel paragraaftags
met verschillende snap-tags in het eerste div-element.
- Een header-tag en een paragraaf-tag
met een snap-tag zijn beide opgenomen in de andere div-tag.
- We hebben interne of ingebedde CSS in het hoofdblok toegepast en de snaptag binnen de paragraaftag vormgegeven. We zijn echter niet verplicht om een klasse voor de snap-tag te maken; in plaats daarvan kunnen we de eerste onderliggende selector (p:eerste-kind) gebruiken om onmiddellijk het eerste snaptag-element binnen de eerste div-tag te identificeren. We kunnen het initiële element (snap) wat stijl geven. Er zijn twee snap-tags in de alinea, maar zoals we kunnen zien, is alleen de eerste tag opgemaakt en zijn de andere genegeerd.
- We kunnen zien hoe het eerste kind naar de eerste snap-tag heeft gezocht en deze in de tweede div-tag heeft vormgegeven. Het element moet het eerste element zijn tussen zijn broers en zussen binnen de bovenliggende tag waarop het eerste kind zich richt; anders wordt het niet gekozen.
De ... gebruikenRij-tag
Met behulp van de rijtag
Syntaxis
tr:first-child{ //CSS declarations with style properties; } Voorbeeld
Laten we voor een beter begrip eens kijken naar een voorbeeld van de eerste onderliggende CSS die de rijtag gebruikt
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> Uitvoer
Uitleg:
- Het bodyblok van de bovenstaande code bevat tabeltags voor de studentinformatie
.
- Er zijn verschillende rijen tags
binnen de tafeltag en de tag op de eerste rij bevat kopteksten zoals het rolnummer, de naam en de cijfers van de leerling. De gegevens van de leerling staan in de overige rijtags.
- Voor het stylen van de rijtag
binnen de tafeltag , hebben we interne of ingebedde CSS in het hoofdblok toegepast. We zijn echter niet verplicht om een klasse voor de rijtag te maken; in plaats daarvan gebruiken we eenvoudigweg de eerste onderliggende selector (p:first-child), die automatisch het tag-element op de eerste rij direct in de tabeltag herkent. We kunnen de rijtag opmaken, wat het eerste element is. Er zijn verschillende rijen met tags in de tabel. Zoals we echter kunnen zien, wordt de eerste tag gestyled, terwijl de rest wordt genegeerd.
Conclusie
In dit artikel leerden we over het eerste kind van CSS. Hier is een conclusie van het eerste kind in het artikel:
- In CSS stelt de eerste onderliggende (:eerste-kind) selector ons in staat om de stijl van het eerste element onmiddellijk op het andere element toe te passen.
- Het eerste kind stijlt het materiaal op basis van hoe het zich verhoudt tot de inhoud van zijn ouders en broers en zussen.
- Een pseudoklasse die lid is van de positiegebaseerde en structuurgebaseerde klassen is het eerste kind. Zonder te controleren op meer broers en zussen (elementen) van hetzelfde type, zal de eerste klas proberen te matchen met het eerste directe kind van de ouder.