Селекторы в CSS

Селектор CSS выбирает элемент (элементы) HTML для целей стилизации. Селекторы CSS выбирают элементы HTML в соответствии с их идентификатором, классом, типом, атрибутом и т. д.

Существует множество основных типов селекторов.

• Селектор элементов
• Селектор идентификаторов
• Выбор класса
• Универсальный селектор
• Выбор группы
• Селектор атрибутов
• Селектор псевдокласса
• Селектор псевдоэлементов

HTML-код: рассмотрите пример кода, чтобы лучше понять селекторы и их использование.

Мы применим правила CSS к приведенному выше HTML-коду.

1. Селектор элементов. Селектор элементов выбирает элементы HTML на основе имени элемента (или тега), например p, h1, div, span и т. д.

style.css: в приведенном выше HTML-коде используется следующий код. Вы можете увидеть правила CSS, применяемые ко всем тегам <p> и тегам <h1>.

h1 {
    color: red;
    font-size: 3rem;
}

p {
    color: white;
    background-color: gray;
}

Выход:

2. Селектор идентификаторов. Селектор идентификаторов использует атрибут идентификатора элемента HTML для выбора определенного элемента.

Примечание. Идентификатор элемента уникален на странице для использования селектора идентификатора .

style.css: следующий код используется в приведенном выше HTML-коде с использованием селектора идентификатора.

#div-container{
    color: blue;
    background-color: gray;
}

Выход:

Приведенное ниже правило CSS будет применено к HTML-элементу с id="div-container":

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

style.css: следующий код используется в приведенном выше HTML-коде с использованием селектора классов. Чтобы использовать селектор класса, вы должны использовать ( . ), за которым следует имя класса в CSS. Это правило будет применяться к элементу HTML с атрибутом класса « paragraph-class ».

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

Выход:

4. Универсальный селектор. Универсальный селектор (*) в CSS используется для выбора всех элементов в HTML-документе. Он также включает в себя другие элементы, которые находятся внутри под другим элементом.

style.css: следующий код используется в приведенном выше HTML-коде с использованием универсального селектора. Это правило CSS будет применяться к каждому элементу HTML на странице:

* {
  color: white;
  background-color: black;
}

Выход:

5. Групповой селектор: этот селектор используется для оформления всех элементов, разделенных запятыми, одним и тем же стилем.

style.css: следующий код используется в приведенном выше HTML-коде с использованием группового селектора. Предположим, вы хотите применить общие стили к разным селекторам, вместо того, чтобы писать правила по отдельности, вы можете написать их группами, как показано ниже.

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

Выход:

6. Селектор атрибутов: Селектор атрибутов [атрибут] используется для выбора элементов с указанным атрибутом или значением атрибута.

style.css: следующий код используется в приведенном выше HTML-коде с использованием селектора атрибутов. Это правило CSS будет применяться к каждому элементу HTML на странице:

[href] {   background-color: lightgreen;
   color: black;
   font-family: monospace;
   font-size: 1rem;
   }

Выход:

7. Селектор псевдокласса: используется для стилизации особого типа состояния любого элемента. Например, он используется для стилизации элемента при наведении на него курсора мыши.

Примечание. Мы используем одно двоеточие (:) в случае селектора псевдокласса.

Синтаксис:

Selector:Pseudo-Class{
Property:Value;
}

style.css: следующий код используется в приведенном выше HTML-коде с использованием селектора псевдокласса. Это правило CSS будет применяться к тегу h1 на странице, когда пользователь наведет на нее курсор мыши, потому что с помощью селектора мы выбрали тег h1 и в псевдоклассе добавили наведение.

h1:hover{
    background-color: aqua;
}

Выход:

8. Селектор псевдоэлементов: используется для стилизации любой конкретной части элемента. Например, он используется для стилизации первой буквы или первой строки любого элемента.

Примечание. Мы используем двойное двоеточие (::) в случае селектора псевдоэлементов.

Синтаксис:

Selector:Pseudo-Element{
Property:Value;
}

style.css: следующий код используется в приведенном выше HTML-коде с использованием селектора псевдоэлементов. Это правило CSS будет применяться к тегу p на странице.

p::first-line{
    background-color: goldenrod;
}

Выход: