Pierwsze dziecko, selektor CSS (pierwsze dziecko), pozwala nam zastosować styl pierwszego elementu bezpośrednio do drugiego elementu. Zgodnie ze specyfikacją CSS Selectors Level 3, nazywa się ją pseudoklasą strukturalną, ponieważ styl dowolnej treści opiera się na jej powiązaniu z treścią nadrzędną i siostrzaną.
Składnia
:first-child { //property } Przykład
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> Wyjście
zestaw maszynopisu
Wyjaśnienie:
- Dwa znaczniki div składają się na blok treści powyższego kodu.
- Istnieje wiele znaczników akapitów
z różnymi tagami przyciągania wewnątrz pierwszego elementu div.
- Znacznik nagłówka i znacznik akapitu
z tagiem przyciągania są zawarte w drugim tagu div.
- Zastosowaliśmy wewnętrzny lub osadzony CSS wewnątrz bloku nagłówkowego i wystylizowaliśmy tag przyciągania w tagu akapitu. Nie musimy jednak tworzyć klasy dla tagu przyciągania; zamiast tego możemy użyć pierwszego selektora podrzędnego (p:first-child), aby natychmiast zidentyfikować pierwszy element znacznika przyciągania wewnątrz pierwszego znacznika div. Elementowi początkowemu (pstryknięciu) możemy nadać trochę stylu. W akapicie znajdują się dwa znaczniki przyciągania, ale jak widzimy, stylizowany jest tylko pierwszy znacznik, a pozostałe zostały zignorowane.
- Możemy zobaczyć, jak pierwsze dziecko szukało pierwszego tagu przyciągania i nadało mu styl w drugim tagu div. Element musi być pierwszym elementem spośród swoich rodzeństwa w tagu nadrzędnym, na który ma być kierowany pierwszy element podrzędny; w przeciwnym razie nie zostanie wybrany.
UżywającEtykieta wiersza
Korzystanie ze znacznika wiersza
Składnia
tr:first-child{ //CSS declarations with style properties; } Przykład
Dla lepszego zrozumienia spójrzmy na przykład pierwszego podrzędnego CSS przy użyciu znacznika wiersza
Inkscape vs Gimp
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> Wyjście
Wyjaśnienie:
- Blok treści powyższego kodu zawiera znaczniki tabeli zawierające informacje o uczniach
.
- Istnieje kilka rzędów tagów
wewnątrz znacznika tabeli , a znacznik pierwszego wiersza zawiera nagłówki, takie jak numer listy uczniów, imię i nazwisko oraz oceny. Dane ucznia zawarte są w pozostałych znacznikach wiersza.
- Do stylizacji znacznika wiersza
wewnątrz znacznika tabeli , zastosowaliśmy wewnętrzny lub osadzony CSS wewnątrz bloku głównego. Nie musimy jednak tworzyć klasy dla znacznika wiersza; zamiast tego używamy po prostu pierwszego selektora podrzędnego (p:first-child), który automatycznie rozpozna element znacznika pierwszego wiersza bezpośrednio wewnątrz znacznika tabeli. Możemy nadać styl znacznikowi wiersza, który jest pierwszym elementem. Wewnątrz tabeli znajduje się kilka rzędów tagów. Jednakże, jak widzimy, pierwszy tag jest stylizowany, a pozostałe są ignorowane.
Wniosek
O pierwszym dziecku CSS dowiedzieliśmy się w tym artykule. Oto wniosek dotyczący pierwszego dziecka w artykule:
- W CSS selektor pierwszego dziecka (:first-child) umożliwia natychmiastowe zastosowanie stylu pierwszego elementu do drugiego elementu.
- Pierwsze dziecko stylizuje materiał w oparciu o jego powiązanie z treściami rodziców i rodzeństwa.
- Pseudoklasa będąca członkiem klas opartych na pozycji i klasach opartych na strukturze jest pierwszym dzieckiem. Bez sprawdzania, czy istnieje więcej rodzeństwa (elementów) tego samego typu, pierwsza klasa spróbuje dopasować się do pierwszego bezpośredniego dziecka rodzica.