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