Az első gyermek, egy CSS-szelektor (first-child), lehetővé teszi, hogy az első elem stílusát közvetlenül a másik elemre alkalmazzuk. A CSS Selectors 3. szintű specifikációja szerint strukturális pszeudoosztálynak nevezik, mivel bármely tartalom stílusát arra alapozza, hogy az hogyan viszonyul a szülő- és testvértartalomhoz.

Szintaxis

 :first-child { //property } 

Példa

 h1:first-child { color: blue; } <p> <span>Let&apos;s get started</span></p> 

Kimenet

Magyarázat:

1. A fenti kódban két div címke alkotja a body blokkot.
2. Számos bekezdéscímke létezik

   különféle snap címkékkel az első div elemen belül.

3. Egy fejléccímke és egy bekezdéscímke

   egy snap címkével egyaránt szerepelnek a másik div címkében.

4. Belső vagy beágyazott CSS-t alkalmaztunk a head blokkon belül, és stílusoztuk a snap címkét a bekezdéscímkén belül. Nem kell azonban osztályt létrehoznunk a snap tag számára; ehelyett használhatjuk az első gyermekválasztót (p:first-child), hogy azonnal azonosítsuk az első snap tag elemet az első div címkén belül. A kezdő elemnek (snap) adhatunk valamilyen stílust. A bekezdésen belül két snap címke található, de mint látjuk, csak az első címke van stílusosan, a többit figyelmen kívül hagytuk.
5. Láthatjuk, hogyan kereste az első gyermek az első snap címkét, és hogyan alakította azt a második div címkében. Az elemnek a szülő címkén belüli testvérei közül az első elemnek kell lennie, amelyet az első gyermek céloz meg; ellenkező esetben nem választják ki.

Használni aSorcímke

A sorcímke használata, alkalmazhatjuk a CSS első gyermekét. Ennek eredményeként, ha stílust alkalmazunk a sorcímkére az első gyermekválasztóval, akkor csak az első sor címke stílusa lesz, a sorcímke többi része pedig nem. Az első gyermek a szülőcímkén belüli első sor elemét célozza meg, a többit figyelmen kívül hagyja.

Szintaxis

 tr:first-child{ //CSS declarations with style properties; } 

Példa

A jobb megértés érdekében nézzünk meg egy példát a sorcímkét használó első alárendelt CSS-rea CSS-ben.

 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> 

Kimenet

Magyarázat:

1. A fenti kód törzsblokkja táblázatcímkéket tartalmaz a tanulói információkhoz.
2. Több sor címke vana táblázatcímke belsejében, és az első sor címkéjének olyan fejlécei vannak, mint a tanuló névsorszáma, neve és jelei. A tanuló adatait a fennmaradó sorcímkék tartalmazzák.
3. A sorcímke stílusának kialakításáhoza táblázatcímke belsejében, belső vagy beágyazott CSS-t alkalmaztunk a fejblokkon belül. Nem kell azonban osztályt létrehoznunk a sorcímkéhez; ehelyett egyszerűen az első gyermekválasztót használjuk (p:first-child), amely automatikusan felismeri az első sor címkeelemét közvetlenül a táblázat címkéjén belül. Stílusozhatjuk a sorcímkét, amely az első elem. A táblázatban több sor címke található. Azonban, amint látjuk, az első címke stílusos lesz, míg a többi figyelmen kívül marad.

Következtetés

Ebben a cikkben megismerkedtünk a CSS első gyermekével. Íme a cikk első gyermekének következtetése:

1. A CSS-ben az első gyermek (:first-child) választó lehetővé teszi, hogy azonnal alkalmazzuk az első elem stílusát a másik elemre.
2. Az első gyermek aszerint alakítja az anyagot, hogy az hogyan viszonyul a szülei és a testvérei tartalmához.
3. Az a pszeudoosztály, amely a pozícióalapú és a struktúra alapú osztályok tagja, az első gyermek. Anélkül, hogy több azonos típusú testvért (elemet) keresnénk, az első osztály megpróbál megfelelni a szülő első közvetlen gyermekének.