Прво дете, ЦСС селектор (фирст-цхилд), омогућава нам да применимо стил првог елемента директно на други елемент. Према спецификацији ЦСС Селецторс Левел 3, назива се структурном псеудокласом јер заснива стил било ког садржаја на томе како се односи на родитељски и братски садржај.
Синтакса
:first-child { //property } Пример
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> Излаз
Објашњење:
танак алгоритам
- Две див ознаке чине блок тела у коду изнад.
- Постоји много ознака пасуса
са различитим снап ознакама унутар првог елемента див.
- Ознака заглавља и ознака пасуса
са снап ознаком су оба укључена у другу див таг.
- Применили смо интерни или уграђени ЦСС унутар блока главе и стилизовали ознаку снап унутар ознаке пасуса. Међутим, од нас се не тражи да креирамо класу за снап таг; уместо тога, можемо да користимо селектор првог детета (п:фирст-цхилд) да тренутно идентификујемо први елемент ознаке за снап унутар прве див ознаке. Почетном елементу (снап) можемо дати неки стил. Унутар пасуса постоје две ознаке за снап, али као што видимо, стилизована је само прва ознака, а остале су занемарене.
- Можемо видети како је прво дете тражило прву снап ознаку и стилизирало је у другој див ознаци. Елемент мора бити први елемент међу својим братима и сестрама унутар родитељске ознаке да би га прво дете циљало; иначе неће бити изабран.
ПомоћуОзнака реда
Коришћење ознаке реда
Синтакса
tr:first-child{ //CSS declarations with style properties; } Пример
За боље разумевање, погледајмо пример првог подређеног ЦСС-а који користи ознаку реда
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> Излаз
Објашњење:
- Блок тела кода изнад садржи ознаке табеле за информације о ученику
.
- Постоји неколико редова ознака
унутар ознаке табеле , а ознака у првом реду има заглавља као што су број листе ученика, име и оцене. Подаци о ученику су садржани у преосталим ознакама реда.
- За стилизовање ознаке реда
унутар ознаке табеле , применили смо интерни или уграђени ЦСС унутар главног блока. Међутим, од нас се не тражи да креирамо класу за ознаку реда; уместо тога, једноставно користимо селектор првог детета (п:фирст-цхилд), који ће аутоматски препознати елемент ознаке првог реда директно унутар ознаке табеле. Можемо да стилизујемо ознаку реда, која је први елемент. Унутар табеле постоји неколико редова ознака. Међутим, као што видимо, први таг се стилизује док се остали занемарују.
Закључак
Сазнали смо о првом детету ЦСС-а у овом чланку. Ево закључка првог детета у чланку:
- У ЦСС-у, селектор првог детета (:фирст-цхилд) нам омогућава да одмах применимо стил првог елемента на други елемент.
- Прво дете стилизује материјал на основу тога како се односи на садржај својих родитеља и браће и сестара.
- Псеудо-класа која је члан класа заснованих на позицији и структури је прво дете. Без провере за више браће и сестара (елемената) истог типа, прва класа ће покушати да се подудара са првим непосредним дететом родитеља.