Първото дете, CSS селектор (първо дете), ни позволява да приложим стила на първия елемент директно към другия елемент. Съгласно спецификацията CSS Selectors Level 3, той се нарича структурен псевдоклас, тъй като базира стила на всяко съдържание върху това как то се отнася към неговото родителско и родствено съдържание.
Синтаксис
:first-child { //property } Пример
c програми
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> Изход
Обяснение:
- Два маркера div съдържат блока body в горния код.
- Има много тагове за параграфи
с различни тагове за прилепване вътре в първия елемент div.
низови методи в java
- Таг за заглавие и таг за абзац
с таг snap са включени в другия таг div.
- Приложихме вътрешен или вграден CSS в главния блок и стилизирахме етикета за прихващане в тага за абзац. От нас обаче не се изисква да създаваме клас за snap тага; вместо това можем да използваме първия дъщерен селектор (p:first-child), за да идентифицираме незабавно първия елемент на snap tag вътре в първия div таг. Можем да придадем на началния елемент (щракване) някакъв стил. Има два snap тагова в параграфа, но както виждаме, само първият таг е стилизиран, а останалите са игнорирани.
- Можем да видим как първото дете търси първия snap таг и го стилизира във втория div таг. Елементът трябва да бъде първият елемент сред своите братя и сестри в родителския таг, който да бъде насочен от първото дете; в противен случай няма да бъде избран.
ИзползвайкиЕтикет на ред
Използване на таг ред
Синтаксис
tr:first-child{ //CSS declarations with style properties; } Пример
сортиран кортеж python
За по-добро разбиране, нека разгледаме пример за първия дъщерен CSS, използващ тага ред
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> Изход
Обяснение:
- Основният блок на кода по-горе съдържа тагове на таблица за информацията за ученика
.
- Има няколко реда тагове
вътре в тага на таблицата , а тагът на първия ред има заглавки като номера, името и оценките на ученика. Данните на ученика се съдържат в останалите тагове на реда.
- За стилизиране на етикета на реда
вътре в тага на таблицата , сме приложили вътрешен или вграден CSS вътре в главния блок. От нас обаче не се изисква да създаваме клас за тага на реда; вместо това ние просто използваме първия селектор за дете (p:first-child), който автоматично ще разпознае елемента на етикета на първия ред точно в тага на таблицата. Можем да стилизираме тага на реда, който е първият елемент. Вътре в таблицата има няколко реда тагове. Въпреки това, както виждаме, първият етикет се стилизира, докато останалите се пренебрегват.
Заключение
Научихме за първото дете на CSS в тази статия. Ето и заключението на първото дете в статията:
- В CSS селекторът за първо дете (:first-child) ни позволява незабавно да приложим стила на първия елемент към другия елемент.
- Първото дете оформя материала въз основа на връзката му със съдържанието на своите родители и братя и сестри.
- Псевдоклас, който е член на класовете, базирани на позиция и структура, е първото дете. Без да проверява за повече братя и сестри (елементи) от същия тип, първият клас ще се опита да съвпадне с първото непосредствено дете на родителя.