logo

TechCodeview

CSS First Child

Перший дочірній елемент, селектор CSS (перший дочірній), дозволяє нам застосувати стиль першого елемента безпосередньо до іншого елемента. Відповідно до специфікації CSS Selectors Level 3, його називають структурним псевдокласом, оскільки він ґрунтує стиль будь-якого вмісту на тому, як він пов’язаний із своїм батьківським і братським вмістом.

Синтаксис 

 :first-child { //property }

приклад

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

Вихід

CSS First Child

Пояснення:

  1. Два теги div містять блок body у коді вище.
  2. Існує багато тегів абзаців

    з різними тегами прив’язки всередині першого елемента div.

    тернарний оператор java
  3. Тег заголовка та тег абзацу

    з тегом snap обидва включені в інший тег div.

  4. Ми застосували внутрішній або вбудований CSS всередині головного блоку та стилізували тег прив’язки в тегу абзацу. Однак нам не потрібно створювати клас для тегу snap; натомість ми можемо використати перший дочірній селектор (p:first-child), щоб миттєво ідентифікувати перший елемент тегу snap всередині першого тегу div. Ми можемо надати початковому елементу (прив’язці) деякий стиль. В абзаці є два теги прив’язки, але, як ми бачимо, лише перший тег має стиль, а інші ігноруються.
  5. Ми бачимо, як перший дочірній елемент шукав перший тег snap і стилізував його у другому тегу div. Елемент має бути першим елементом серед своїх братів і сестер у батьківському тегу, на який націлюється перший дочірній елемент; інакше він не буде обраний.

ВикористовуючиТег рядка

Використання тегу рядка, ми можемо застосувати першого дочірнього елемента CSS. Як наслідок, якщо ми застосуємо стиль до тегу рядка за допомогою першого дочірнього селектора, буде стилізовано лише тег першого рядка, а решта тегу рядка не буде стилізована. Перший дочірній елемент буде націлений на елемент першого рядка в батьківському тегу, а решта буде проігноровано.

Синтаксис 

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

приклад

java замінити все

Для кращого розуміння розглянемо приклад першого дочірнього CSS з використанням тегу rowу 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 First Child

Пояснення:

  1. Основний блок коду вище містить теги таблиці для інформації про студента.
  2. Є кілька рядів тегіввсередині тегу таблиці, а тег першого рядка має заголовки, як-от номер, ім’я та оцінки студента. Дані студента містяться в решті тегів рядків.
  3. Для стилізації тегу рядкавсередині тегу таблиці, ми застосували внутрішній або вбудований CSS у головний блок. Однак нам не потрібно створювати клас для тегу row; натомість ми просто використовуємо перший дочірній селектор (p:first-child), який автоматично розпізнає елемент тегу першого рядка безпосередньо в тегу таблиці. Ми можемо стилізувати тег рядка, який є першим елементом. Усередині таблиці є кілька рядків тегів. Однак, як ми бачимо, перший тег стилізується, а решта ігноруються.

Висновок

Ми дізналися про першу дитину CSS у цій статті. Ось висновок первістка в статті:

  1. У CSS селектор першого дочірнього елемента (:first-child) дозволяє нам негайно застосувати стиль першого елемента до іншого елемента.
  2. Перша дитина стилізує матеріал на основі того, як він пов’язаний із вмістом батьків, братів і сестер.
  3. Псевдоклас, який є членом класів на основі позиції та структури, є першим дочірнім елементом. Не перевіряючи більше братів і сестер (елементів) одного типу, перший клас намагатиметься зіставити з першим безпосереднім дочірнім елементом батька.