Что такое селектор ?
Спросят с вероятностью 7%

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

Вот основные типы селекторов и их примеры:

1️⃣Селекторы по тегу:
✅Выбирает все элементы с определённым тегом.

        p {
        color: blue;
    }
    

2️⃣Селекторы по классу:
✅Выбирает элементы с определённым классом. Класс указывается с помощью точки ..

        .example {
        font-size: 16px;
    }
    

3️⃣Селекторы по идентификатору (ID):
✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки #.
✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки #.

        #uniqueElement {
        background-color: yellow;
    }
    

4️⃣Комбинированные селекторы:
✅Позволяют выбирать элементы, используя комбинацию различных критериев.
✅Селекторы потомков: выбирают элементы, которые находятся внутри другого элемента.

        div p {
        margin: 20px;
    }

✅Селекторы дочерних элементов: выбирают элементы, которые являются дочерними для другого элемента.

        div > p {
        margin: 20px;
    }

✅Смежные селекторы: выбирают элементы, которые следуют непосредственно за другим элементом.

        h1 + p {
        margin-top: 10px;
    }

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

        a[href] {
        color: red;
    }

5️⃣Псевдоклассы:
✅Позволяют выбирать элементы в определённом состоянии.

        a:hover {
        color: green;
    }

6️⃣Псевдоэлементы:
✅Позволяют стилизовать определённые части элементов.

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

Примеры:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример селекторов</title>
    <style>
        /* Селектор по тегу */
        h1 {
            color: blue;
        }
        /* Селектор по классу */
        .highlight {
            background-color: yellow;
        }
        /* Селектор по ID */
        #main {
            font-size: 20px;
        }
        /* Селектор по атрибуту */
        a[target="_blank"] {
            color: red;
        }
        /* Псевдокласс */
        a:hover {
            text-decoration: underline;
        }
        /* Псевдоэлемент */
        p::first-letter {
            font-size: 200%;
            color: green;
        }
    </style>
</head>
<body>
    <h1>Заголовок</h1>
    <p class="highlight">Это пример текста с подсветкой.</p>
    <p id="main">Это основной текст.</p>
    <a href="https://example.com" target="_blank">Ссылка</a>
</body>
</html>

Селектор — это шаблон, который выбирает элементы HTML для применения стилей. Существуют разные типы селекторов, такие как по тегу, классу, ID, а также комбинированные селекторы, псевдоклассы и псевдоэлементы.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых