Селекторы CSS
Селектор CSS выбирает элементы HTML, которые вы хотите украсить.
Селекторы CSS
Селекторы CSS используются для "находа" (или выбора) элементов HTML, которые вы хотите стилизовать.
Мы можем разделить селекторы CSS на пять категорий:
- Простые селекторы (выберите элементы на основе имени, идентификатора, класса)
- Селекторы комбинаторов (выберите элементы на основе конкретной связи между ними)
- Сельборы псевдоклассов (выберите элементы на основе определенного состояния)
- Селекторы псевдоэлементов (выберите и укорите часть элемента)
- Селекторы атрибутов (выберите элементы на основе атрибута или значения атрибута)
На этой странице будут объяснены самые основные селекторы CSS.
Селектор элементов CSS
Селектор элементов выбирает HTML-элементы на основе имени элемента.
p {
text-align: center;
color: red;
}
Селектор идентификаторов CSS
Селектор id использует атрибут id элемента HTML для выбора конкретного элемента.
Идентор элемента уникален внутри страницы, поэтому селектор идентификатора используется для выбора одного уникального элемента!
Чтобы выбрать элемент с определенным идентификатором, напишите символ хеша (#), за которым следует идентификатор элемента.
Приведенное ниже правило CSS будет применено к элементу HTML с помощью id="para1":
Примечание: Имя идентификатора не может начинаться с числа!
Селектор классов 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;
}
Лучше сгруппировать селекторы, чтобы свести к минимуму код.
Чтобы сгруппировать селекторы, разделите каждый селектор запятой.
В этом примере мы сгруппировали селекторы из приведенного выше кода: