Селекторы CSS
Селектор CSS выбирает элемент (элементы) HTML, который вы хотите стилизовать.
Селекторы CSS
Селекторы CSS используются для «поиска» (или выбора) элементов HTML, которые вы хотите стилизовать.
Селекторы CSS можно разделить на пять категорий:
- Простые селекторы (выбор элементов на основе имени, идентификатора, класса)
- Селекторы-комбинаторы (выбирают элементы на основе определенного отношения между ними)
- Селекторы псевдоклассов (выбирают элементы на основе определенного состояния)
- Селекторы псевдоэлементов (выберите и стилизуйте часть элемента)
- Селекторы атрибутов (выбор элементов на основе атрибута или значения атрибута)
Эта страница объяснит самые основные селекторы CSS.
Селектор элементов CSS
Селектор элементов выбирает элементы HTML на основе имени элемента.
Пример
Здесь все элементы <p> на странице будут выровнены по центру с красным цветом текста:
p
{
text-align: center;
color: red;
}
Селектор идентификатора CSS
Селектор id использует атрибут id элемента HTML для выбора определенного элемента.
Идентификатор элемента уникален на странице, поэтому селектор идентификаторов используется для выбора одного уникального элемента!
Чтобы выбрать элемент с определенным идентификатором, напишите символ решетки (#), за которым следует идентификатор элемента.
Пример
Приведенное ниже правило CSS будет применено к HTML-элементу с id="para1":
#para1
{
text-align: center;
color: red;
}
Примечание. Имя идентификатора не может начинаться с цифры!
Селектор классов CSS
Селектор класса выбирает элементы HTML с определенным атрибутом класса.
Чтобы выбрать элементы с определенным классом, напишите символ точки (.), а затем имя класса.
Пример
В этом примере все элементы HTML с class="center" будут красными и выровнены по центру:
.center {
text-align: center;
color: red;
}
Вы также можете указать, что класс должен влиять только на определенные элементы HTML.
Пример
В этом примере только элементы <p> с class="center" будут красными и выровнены по центру:
p.center {
text-align: center;
color: red;
}
Элементы HTML также могут относиться к более чем одному классу.
Пример
В этом примере элемент <p> будет оформлен в соответствии со стилями class="center" и class="large":
<p class="center large">This paragraph refers to two classes.</p>
Примечание. Имя класса не может начинаться с цифры!
Универсальный селектор CSS
Универсальный селектор (*) выбирает все элементы HTML на странице.
Пример
Приведенное ниже правило CSS повлияет на каждый элемент HTML на странице:
*
{
text-align: center;
color: blue;
}
Селектор группировки CSS
Селектор группировки выбирает все элементы HTML с одинаковыми определениями стиля.
Посмотрите на следующий код CSS (элементы h1, h2 и p имеют одинаковые определения стиля):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Лучше сгруппировать селекторы, чтобы минимизировать код.
Чтобы сгруппировать селекторы, разделите каждый селектор запятой.
Пример
В этом примере мы сгруппировали селекторы из приведенного выше кода:
h1, h2, p
{
text-align: center;
color: red;
}
Все простые селекторы CSS
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |