Псевдоклассы дочерних элементов

Псевдоклассы дочерних элементов

Coursme
8 мин
13 янв. 2024

Псевдоклассы в CSS, посвященные дочерним элементам, предоставляют элегантные способы стилизации и выделения частей веб-страницы.

Давайте погрузимся в этот мир исключений и выделений с некоторыми из самых интересных псевдоклассов

:first-child

Псевдокласс :first-child — это элегантный выбор первого дочернего элемента внутри своего родителя. Это как прелюдия в классической музыке, где первый инструмент оркестра вступает в магический аккорд, устанавливая тон всему произведению. В CSS, этот селектор помогает выделить и оформить именно тот элемент, который вступает в "музыкальный" поток ваших стилей.

p:first-child {
   color: red;
}

Этот код подарит красные акценты первым параграфам, создавая утонченный визуальный эффект.

Пример:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p:first-child {
            color: red;
        }
    </style>
    <title>:first-child Example</title>
</head>
<body>
    <div>
        <p>Первый параграф</p>
        <p>Второй параграф</p>
    </div>
    <div>
        <p>Третий параграф</p>
        <p>Четвертый параграф</p>
    </div>
</body>
</html>

В этом примере мы выбрали все элементы <p>, которые являются первыми дочерними элементами своих контейнеров <div>, и присвоили им красный цвет текста.

:last-child -

Селектор :last-child — это точное определение последнего дочернего элемента внутри контейнера. Как финальная нота в музыкальной композиции, этот селектор добавляет завершенность и завершающий аккорд к вашему дизайну.

a:last-child {
   color: blue;
}

Здесь последняя ссылка в каждом блоке будет окрашена в глубокий синий, подчеркивая ее значимость.

Пример:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        a:last-child {
            color: blue;
        }
    </style>
    <title>:last-child Example</title>
</head>
<body>
    <div>
        <a>Ссылка 1</a>
        <a>Ссылка 2</a>
    </div>
    <div>
        <a>Ссылка 3</a>
        <a>Ссылка 4</a>
    </div>
</body>
</html>

Выбраны последние дочерние элементы <a> в каждом блоке <div>, и им присвоен синий цвет текста.

:only-child

Псевдокласс :only-child выбирает элемент, являющийся единственным дочерним элементом внутри родительского контейнера. Это подобно соло в оркестре, где один инструмент привлекает внимание к своей уникальной мелодии.

p:only-child {
   color: red;
}

Тут стиль применится только к параграфам, которые единственные в своем контейнере, добавляя индивидуальность.

Пример:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p:only-child {
            color: red;
        }
    </style>
    <title>:only-child Example</title>
</head>
<body>
    <div>
        <p>Единственный параграф в этом контейнере</p>
    </div>
    <div>
        <p>Первый параграф</p>
        <p>Второй параграф</p>
    </div>
</body>
</html>

Селектор :only-child применен к параграфам <p>, которые являются единственными дочерними элементами своих блоков <div>, и им присвоен красный цвет текста.

:only-of-type

Селектор :only-of-type выделяет элемент, являющийся единственным представителем своего типа (тега) внутри родительского контейнера. Это как особый инструмент, выделяющийся в море других, создавая гармоничное единство.

span:only-of-type {
   color: green;
}

Здесь только один элемент типа <span> в каждом контейнере получит зеленую стилизацию.

Пример:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        span:only-of-type {
            color: green;
        }
    </style>
    <title>:only-of-type Example</title>
</head>
<body>
    <div>
        <span>Единственный элемент span в этом контейнере</span>
    </div>
    <div>
        <span>Первый span</span>
        <p>Второй параграф</p>
    </div>
</body>
</html>

Выбраны единственные элементы <span>, являющиеся единственными представителями своего типа внутри контейнеров <div>, и им присвоен зеленый цвет текста.

:nth-child(n)

Селектор :nth-child(n) стилизует дочерний элемент с определенным порядковым номером. Это как дирижер, который указывает каждому инструменту свою уникальную партию, создавая сложную симфонию.

li:nth-child(2) {
   font-weight: bold;
}

В данном случае второй элемент списка будет выделен жирным шрифтом.

Пример:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        li:nth-child(2) {
            font-weight: bold;
        }
    </style>
    <title>:nth-child Example</title>
</head>
<body>
    <ul>
        <li>Элемент списка 1</li>
        <li>Элемент списка 2 (жирный шрифт)</li>
        <li>Элемент списка 3</li>
    </ul>
</body>
</html>

Применен к элементам <li>, где каждый второй элемент будет иметь жирное начертание.

:nth-last-child(n) -

Селектор :nth-last-child(n) стилизует дочерний элемент с определенным порядковым номером, начиная с конца. Это как последний аккорд в музыкальной композиции, завершающий мелодию.

div:nth-last-child(3) {
   background-color: #ccc;
}

В данном случае, селектор div:nth-last-child(3) будет стилизовать третий дочерний элемент (подсчитывая с конца) типа <div> внутри своего родительского контейнера. Таким образом, третий <div> с конца получит фоновый цвет #ccc.

Пример:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div:nth-last-child(3) {
            background-color: #ccc;
        }
    </style>
    <title>:nth-last-child Example</title>
</head>
<body>
    <div>Первый блок</div>
    <div>Второй блок</div>
    <div>Третий блок (серый фон)</div>
</body>
</html>

Выбран третий блок <div> с конца, и ему присвоен серый фон.

Все эти селекторы позволяют гибко настраивать стили элементов в зависимости от их позиции и вида в структуре HTML-документа, добавляя визуальное разнообразие и выразительность дизайна.

Заключение

Использование псевдоклассов в CSS предоставляет эффективные инструменты для точной настройки стилей веб-страницы. От первых и последних элементов до единственных и определенных по порядку, эти селекторы придают дизайну гибкость и выразительность, обогащая пользовательский опыт.

Назад
Следующий тест
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Курсы
Блог
Меню