7. Селекторы

Введение

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

Типы селекторов

Селектор по тегу (элементу)

Селектор по тегу выбирает все элементы указанного типа.

				
					p {
    color: blue;
}

В этом примере все элементы <p> на странице будут иметь синий цвет текста.

Селектор по классу

Селектор по классу выбирает элементы с указанным классом.

				
					.highlight {
    background-color: yellow;
}

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

Селектор по идентификатору (ID)

Селектор по идентификатору выбирает элемент с указанным ID. Важно помнить, что ID должен быть уникален на странице.

				
					#header {
    font-size: 24px;
}

В этом примере элемент с ID header будет иметь размер шрифта 24 пикселя.

Селекторы по атрибуту

Селекторы по атрибуту выбирают элементы с указанным атрибутом или значением атрибута.

				
					[type="text"] {
    border: 1px solid #ccc;
}

В этом примере все элементы с атрибутом type="text" будут иметь серую рамку.

Комбинированные селекторы

Комбинированные селекторы позволяют объединять несколько условий для выбора элементов.

Селекторы потомков

Выбирают элементы, которые являются потомками указанного элемента.

				
					div p {
    color: green;
}

В этом примере все элементы <p> внутри <div> будут зелёного цвета.

Селекторы дочерних элементов

Выбирают элементы, которые являются прямыми дочерними элементами указанного элемента.

				
					ul > li {
    margin-bottom: 10px;
}

В этом примере все прямые дочерние элементы <li> внутри <ul> будут иметь нижний отступ 10 пикселей.

Соседние селекторы

Выбирают элементы, которые следуют непосредственно за указанным элементом.

				
					h1 + p {
    font-size: 18px;
}

В этом примере первый параграф после <h1> будет иметь размер шрифта 18 пикселей.

Общие соседние селекторы

Выбирают все элементы, следующие за указанным элементом на одном уровне.

				
					h2 ~ p {
    color: red;
}

В этом примере все параграфы после <h2> на одном уровне будут красного цвета.

Псевдоклассы

Псевдоклассы используются для выбора элементов в определённом состоянии или на основании их позиции.

: выбирает элементы при наведении на них курсора.

				
					a:hover {
    text-decoration: underline;
}

: выбирает первый дочерний элемент родителя.

				
					p:first-child {
    font-weight: bold;
}

(n): выбирает элемент на основе его позиции среди братьев и сестёр.

				
					li:nth-child(odd) {
    background-color: #f0f0f0;
}

Псевдоэлементы

Псевдоэлементы позволяют стилизовать части элемента, такие как первая буква или первая строка текста.

::first-line: выбирает первую строку текста элемента.

				
					p::first-line {
    font-weight: bold;
}

::first-letter: выбирает первую букву элемента.

				
					p::first-letter {
    font-size: 200%;
}

::before и ::after: позволяют вставлять содержимое перед или после элемента.

				
					p::before {
    content: "Note: ";
    font-weight: bold;
}

Примеры использования селекторов

				
					<!DOCTYPE html>
<html>
<head>
    <title>Примеры селекторов</title>
    <style>
        /* Селектор по тегу */
        p {
            color: blue;
        }
        
        /* Селектор по классу */
        .highlight {
            background-color: yellow;
        }
        
        /* Селектор по ID */
        #header {
            font-size: 24px;
            color: navy;
        }
        
        /* Селектор по атрибуту */
        [type="text"] {
            border: 1px solid #ccc;
        }
        
        /* Селектор потомков */
        div p {
            color: green;
        }
        
        /* Селектор дочерних элементов */
        ul > li {
            margin-bottom: 10px;
        }
        
        /* Соседний селектор */
        h1 + p {
            font-size: 18px;
        }
        
        /* Общий соседний селектор */
        h2 ~ p {
            color: red;
        }
        
        /* Псевдоклассы */
        a:hover {
            text-decoration: underline;
        }
        
        p:first-child {
            font-weight: bold;
        }
        
        li:nth-child(odd) {
            background-color: #f0f0f0;
        }
        
        /* Псевдоэлементы */
        p::first-line {
            font-weight: bold;
        }
        
        p::first-letter {
            font-size: 200%;
        }
        
        p::before {
            content: "Note: ";
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 id="header">Заголовок 1 уровня</h1>
    <h2>Заголовок 2 уровня</h2>
    <p>Это первый параграф.</p>
    <p class="highlight">Это второй параграф с выделением.</p>
    <div>
        <p>Параграф внутри div.</p>
    </div>
    <ul>
        <li>Элемент списка 1</li>
        <li>Элемент списка 2</li>
        <li>Элемент списка 3</li>
    </ul>
    <a href="#">Ссылка</a>
    <input type="text" placeholder="Текстовое поле">
</body>
</html>

Распространённые ошибки

Неправильный синтаксис селекторов: Убедитесь, что синтаксис селектора написан правильно.
- Неверно: p:firstchild
- Верно: p:first-child
Применение ID вместо класса для нескольких элементов: ID должен быть уникальным на странице, тогда как классы могут использоваться для нескольких элементов.
- Неверно: <p id="text">Текст 1</p> <p id="text">Текст 2</p>
- Верно: <p class="text">Текст 1</p> <p class="text">Текст 2</p>
Конфликты специфичности: Будьте внимательны с приоритетами стилей, чтобы избежать неожиданных результатов.
- Важно: чем более специфичный селектор, тем выше его приоритет.

Заключение

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

Тестовое задание

Создайте HTML-документ с несколькими заголовками, параграфами, списками, ссылками и полями ввода.
Примените различные типы селекторов для стилизации этих элементов.
Используйте селекторы по тегу, классу, ID, атрибуту, а также комбинированные селекторы и псевдоклассы.

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Тестовое задание: Селекторы</title>
    <style>
        /* Селектор по тегу */
        p {
            color: blue;
        }

        /* Селектор по классу */
        .highlight {
            background-color: yellow;
        }

        /* Селектор по ID */
        #main-header {
            font-size: 24px;
            color: navy;
        }

        /* Селектор по атрибуту */
        [type="text"] {
            border: 1px solid #ccc;
        }

        /* Селектор потомков */
        div p {
            color: green;
        }

        /* Селектор дочерних элементов */
        ul > li {
            margin-bottom: 10px;
        }

        /* Соседний селектор */
        h1 + p {
            font-size: 18px;
        }

        /* Общий соседний селектор */
        h2 ~ p {
            color: red;
        }

        /* Псевдоклассы */
        a:hover {
            text-decoration: underline;
        }

        p:first-child {
            font-weight: bold;
        }

        li:nth-child(odd) {
            background-color: #f0f0f0;
        }

        /* Псевдоэлементы */
        p::first-line {
            font-weight: bold;
        }

        p::first-letter {
            font-size: 200%;
        }

        p::before {
            content: "Note: ";
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 id="main-header">Главный заголовок</h1>
    <h2>Подзаголовок</h2>
    <p>Первый параграф на странице.</p>
    <p class="highlight">Второй параграф с выделением.</p>
    <div>
        <p>Параграф внутри div.</p>
    </div>
    <ul>
        <li>Элемент списка 1</li>
        <li>Элемент списка 2</li>
        <li>Элемент списка 3</li>
    </ul>
    <a href="#">Ссылка</a>
    <input type="text" placeholder="Введите текст">
</body>
</html>

Выполнив это задание, вы научитесь применять различные типы селекторов в CSS и получите представление о том, как эффективно стилизовать элементы на веб-странице.