Псевдоклас :first-child дозволяє встановити стиль для першого дочірнього елемента з групи братських елементів, тобто таких, у яких один з батьків.
Для демонстрації скористаємося наступним списком.
<ul> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ul>
Всі елементи <li> тут рівні між собою і мають спільного батька <ul>. Таким чином, :first-child вибере перший пункт списку з текстом "Uno".
Селектор :first-child вибирає всі перші елементи в кожній групі веб-сторінки, що зазвичай не потрібно. Для скорочення охоплення :first-child потрібно додати селектор елемента — p:first-child. Цей запис слід читати справа наліво — спочатку вибирається перший елемент, потім перевіряється, що це елемент <p>. Якщо першим елементом буде <p>, то до нього застосовуються стильові правила; якщо першим виявляється інший елемент (не <p>), то стиль до нього не застосовується.
Складнощі з розумінням роботи :first-child зазвичай виникають при чергуванні різних елементів, як показано нижче.
<code data-language="html"><section> <p>Один</p> <div>Uno</div> <p>Два</p> <div>Dos</div> <p>Три</p> <div>Tres</div> </section>
Наступний стиль зробить текст першого елемента всередині <section> зеленим («Один»). При цьому ми не вказуємо який це елемент, тому проста перестановка рядків у HTML буде робити будь-який перший рядок зеленої.
section > :first-child { color: green; }Додавання div до селектора не дає жодного результату — жодна з рядків не стане зеленою. Тут береться перший елемент і порівнюється, чи він <div>. Оскільки першим елементом усередині <section> у нас йде <p>, то стиль не застосовуватиметься.
section > div:first-child { color: green; }Замінивши div на p отримаємо перший рядок зеленого, оскільки першим елементом у нас йде саме <p>.
section > p:first-child { color: green; }Подібно :first-child працює і :last-child, тільки він визначає останній елемент групи. Наприклад, наступний стиль зробить зелений рядок із текстом «Tres», оскільки елемент <div> йде останнім.
section > div:last-child { color: green; }Псевдокласи :first-child та :last-child зазвичай застосовуються у списках і таблицях, де послідовно йдуть одні й самі елементи. У прикладі 1 між пунктами горизонтального списку додається вертикальна лінія через властивість border-left. Щоб прибрати лінію першого пункту використовуємо псевдоклас :first-child.
Приклад 1. :first-child для списку
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:first-child</title> <style> ul { background: #86328c; /* Колір тла */
padding: 0; /* Обнулюємо */
}
li { display: inline-block; /* Вишиковуємо по горизонталі */
color: #eedfac; /* Колір тексту */
padding: 10px; /* Поля навколо тексту */
border-left: 1px solid #f190ac; /* Лінія зліва */
}
li:first-child { /* Для першого елемента */
border-left: none; /* прибираємо лінію */
}
</style>
</head>
<body> <ul> <li>Uno</li><li>Dos</li><li>Tres</li>
</ul>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Список з вертикальними лініями
Аналогічний результат досягається і за допомогою :last-child, тільки замість лінії зліва треба зробити її праворуч через властивість border-right.
Цікаві лінії можна отримати за рахунок комбінації світлих та темних кордонів. На рис. 2 показана таблиця, в якій осередки виділяються такими межами.
Мал. 2. Кордони в таблиці
До кожної комірки додається біла лінія праворуч і зверху, а також сіра лінія зліва та знизу. :first-child та :last-child застосовуються для скасування ліній у першому та останньому осередках у рядку (приклад 2).
Приклад 2. Використання :last-child
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:first-child</title> <style> table { background: #f7f7f7; /* Колір тла */
width: 100%; /* Ширина таблиці */
border-spacing: 0; /* Відстань між осередків */
border: 1px solid #ccc; /* Параметри рамки */
}
th, td { padding: 10px; /* Поля в осередках */
}
th { background: #e9e9e9; /* Колір тла заголовка */
}
th, td { border-left: 1px solid #ccc; border-right: 1px solid #fff; border-top: 1px solid #fff; border-bottom: 1px solid #ccc; }
th:first-child, td:first-child { border-left: none; }
th:last-child, td:last-child { border-right: none; }
tr:last-child td { border-bottom: none; }
</style>
</head>
<body> <table> <thead> <tr> <th>Значення</th> <th>Значення за замовчуванням</th> <th>Опис</th>
</tr>
</thead> <tbody> <tr> <td>top</td> <td>Так</td> <td>Розташовує заголовок по верхньому краю таблиці.</td>
</tr> <tr> <td>bottom</td> <td>Ні</td> <td>Заголовок знаходиться під таблицею.</td>
</tr>
</tbody>
</table>
</body>
</html>Зверніть увагу на селектор tr:last-child td — він дозволяє звернутися до осередків останнього рядка в таблиці та прибрати у них лінію знизу.