Селекторы в CSS позволяют выбирать элементы HTML-кода, для которых вы хотите задать стили. Есть несколько типов селекторов в CSS, позволяющих выбирать элементы по разным критериям:
- Селектор элемента — выбирает все элементы заданного типа. Например,
pвыберет все элементы<p>в документе. - Селектор класса — выбирает все элементы с заданным классом. Например,
.myClassвыберет все элементы с классом «myClass». - Селектор ID — выбирает элемент с заданным ID. Например,
#myIDвыберет элемент с ID «myID». - Селектор атрибута — выбирает элементы, которые имеют указанный атрибут. Например,
[href]выберет все элементы с атрибутом «href». - Селектор потомка — выбирает элементы, которые являются потомками других элементов. Например,
div pвыберет все элементы<p>, которые являются потомками элемента<div>. - Селектор потомка сразу после — выбирает элементы, которые являются непосредственными потомками других элементов. Например,
div > pвыберет только элементы<p>, которые являются непосредственными потомками элемента<div>. - Селектор связки — выбирает элементы, которые соответствуют нескольким условиям. Например,
div.myClassвыберет все элементы<div>, которые имеют класс «myClass». - Селектор псевдоэлемента — выбирает элементы, которые имеют определенное состояние, например, первый символ текста или выделенный текст. Например,
:hoverвыберет элемент, над которым находится курсор мыши.
Примеры использования селекторов в CSS:
/* Селектор элемента */
p {
color: blue;
}
/* Селектор класса */
.myClass {
font-weight: bold;
}
/* Селектор ID */
#myID {
text-decoration: underline;
}
/* Селектор атрибута */
a[href] {
color: red;
}
/* Селектор потомка */
div p {
font-size: 16px;
}
/* Селектор потомка сразу после */
div > p {
font-size: 18px;
}
/* Селектор связки */
div.myClass {
background-color: yellow;
}
/* Селектор псевдоэлемента */
p::first-letter {
font-size: 24px;
}
