Впервые, мы познакомились с селекторами CSS
в девятом уроке учебника по CSS. В этой статье мы изучим селекторы более подробно, а так же рассмотрим другие виды селекторов CSS.
Селектор
(от англ. selector) — сортировка, выборка. Под селекторами, в языке CSS понимается способ выборки элементов (тегов) страницы.
Как мы знаем из , схема CSS-кода выглядит следующим образом:
Селектор {
CSS-свойство: значение;
CSS-свойство: значение;
... и т.д.
}
Виды CSS-селекторов
Всего существует три основных вида селекторов и их различные взаимоотношения. Помимо этого существует универсальный селектор, селекторы атрибутов, селекторы атрибутов и значений и их выборка с помощью регулярных выражений.
Обычно, при создании сайта, используют лишь основные селекторы.
Основные виды селекторов CSS
1. Селектор тега
— выбор элемента страницы по имени его тега имяТега { }
2. Селектор class
— выбор элемента страницы по имени его класса.имяКласса { }
3. Селекторы id
— выбор элемента страницы по имени его уникального идентификатора #имяУникальногоИдентификатора { }
Взаимоотношения между селекторами CSS
Взаимоотношения между селекторами, это когда между ними в CSS-коде ставят какой-либо знак: пробел, запятую, угловую скобку и т.д. Таким образом, можно выбрать какой-либо элемент на странице более точечно.
1. Контекстные селекторы
— выбор элементов потомков селектор селектор { } (между селекторами ставят пробел).
2. Дочерние селекторы
— выбор дочерних элементов селектор > селектор { } (между селекторами ставят знак больше).
3. Соседние селекторы
— выбор соседних (братских, сестринских) элементов селектор + селектор { } (между селекторами ставят знак плюс).
Если что не понятно, не переживайте, каждый селектор и их взаимоотношения мы рассмотрим отдельно, в статьях посвященных только им, вот только допишу эти статьи 🙂
Селекторы атрибутов и значений
Селекторы атрибутов и значений
— выбирают элементы по их атрибуту или атрибуту и значению.
1. Селектор атрибута
— выбор элемента по имени атрибута [атрибут] { }
2. Селектор атрибута и значения
— выбор элемента по имени его атрибута и значения [атрибут = "значение"] { }
Универсальный селектор
В CSS-коде, универсальный селектор
записывают как символ звёздочка * Универсальный селектор необходим для того,
чтобы задать CSS-свойства сразу всем элементам страницы. Обычно его используют для того чтобы обнулить отступы у элементов, пример:
* { margin:0; padding:0; }
Отступы у всех элементов страницы равны 0.
Группирование селекторов
Группирование селекторов
— выбор нескольких селекторов и назначение им определённых CSS-свойств, схема:
Селектор, селектор { }
Между селекторами ставят запятую.
". Итак, селектор - это элемент, к которому применяется объявление в правиле стиля.
Термины, используемые в описании правил CSS.
Рис.1. Обычное правило CSS.
Рис.2. Пример правила CSS.
Коротко про синтаксис записи правил CSS:
Объявление стиля в парвиле берётся в фигурные скобки - {}
Свойство и значение в объявлении разделяются двоеточием - :
В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
В конце каждой пары свойство: значение
ставится точка с запятой - ;
После последней пары свойство: значение
точку с запятой ставить не обязательно.
Можно назначать стилевые правила элементам в зависимости от того, вложен ли этот элемент в другой. Если один тег вложен в другой, то вложенный тег называется его потомком, а тег в который вложен потомок называется предком. Например, нужно задать абзацам
Внутри таблицы
красный цвет текста. Для решения такой задачи в селекторе элементы располагаются в порядке вложенности и разделяются пробелами. То есть наша задача решается так:
Селекторы потомков в CSS
Привет!
Текст абзаца в таблице.
Текст абзаца вне таблицы.
Все теги
Во всех таблицах документа будут отображать цвет красным цветом. Обратите внимание, то тег
Находящийся внутри тега
тоже отображает текст красным цветом.
На самом деле, вместо
можно было указать тег
, так как тег
всегда должен содержать тег
.
Для дальнейшего изучения селекторов CSS нужно освоить несколько несложных терминов относящихся к структуре документа.
Дерево документа (англ. document tree) - это схема построения HTML документа, показывающая порядок следования тегов и их вложенность друг в друга. Приведём пример такой схемы:
Дерево документа наглядно показывает связи в HTML документе, порядок следования тегов и их вложенность. Его используют разработчики для написания CSS стилей и JavaScript сценариев.
Вот пример кода, соответствующего схеме дерева элементов с рисунка 1.
Дерево документа.
Привет!
Текст абзаца и жирный.
Пункт 1.1
Пункт 1.2
Пункт 1.3
Пункт 2.1
Пункт 2.2
Пункт 2.3
Итак, между тегами HTML документа существуют связи. Они выражаются в вложенности тегов или порядке следования одного тега за другим. Эти связи называют родственные связи, а для обозначения различных типов родственных связей используют термины, такие как предок и потомок, родительский и дочерний элемент и другией "семейные" термины.
Теперь рассмотрим все типы связей.
Предки и потомки
Предки (ancestor) - элементы, которые содержат другие элементы, то есть элемент является предком для всех
вложенных в него элементов.
Потомки (descendant) - элементы, вложенные в другой элемент.
Селекторы потомков уже были рассмотрены выше.
Родители и дочерние элементы
Родитель (parent) - это предок первого уровня (непосредственный предок) для элемента. Дочерний элемент (child - ребёнок) - это потомок первого уровня. Родительский элемент может иметь неограниченное число детей.
В нашем дереве элементов у тега
следующие дочерние элементы:
,
,
и ещё один
Братские или сестринские элементы
Братские или сестринские элементы, (англ. siblings - братья и сестры), группа элементов имеющая общего родителя. Например, теги
,
,
и второй
Сестринские, так как у них общий родитель
.
Смежные элементы
Смежные элементы - это соседние братские элементы, то есть элементы имеющие общего родителя и идущие радом в дереве элементов. В нашем примере смежными элементами будут пары:
и
,
И
,
и
Теперь вернёмся к селекторам.
Дочерние селекторы
Когда нас интересуют не все потомки, а только потомки первого уровня, то есть дочерние элементы, в CSS используют дочерние селекторы. Для указания того, что правило стиля задано только к дочернему элементу, в селекторе используется символ ">".
Дочерние селекторы в CSS
Привет!
Текст абзаца в таблице.
Текст абзаца в таблице (в контейнере div).
Текст абзаца вне таблицы.
HTML-код этого примера полностью совпадает с кодом примера для селектора потомков, отличается только правило стиля. В результате применения дочернего селектора текст абзаца в таблице в контейнере
уже не красного цвета, так как для этого абзаца тег
родитель, а тег
предок.
Смежный (соседний) селектор
Селектор смежного элемента выбирает элемент, расположенный непосредственно за другим заданным элементом. Синтаксис этого селектора: селектор предыдущего элемента, знак "+" и за ним селектор выбираемого элемента.
Давайте рассмотрим реальный пример. В больших статьях, содержащих несколько разделов озаглавленных тегами
, желательно увеличить верхний отступ (свойство margin-top
). Отступ в 20px будет придавать тексту читабельности. Но вот в случае, если тег
идёт сразу после
, а это может быть в начале статьи, вержний отступ над тегом
будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.
Вот html-код с примером работы селектора смежного элемента.
Смежный селектор в CSS
Привет!
Заголовок h2
Заголовок h2
Текст абзаца в про невероятные приключения.
Другое название смежных селекторов: соседние селекторы , тут можно прочитать подробнее про этот тип селекторов.
Родственный селекторы
Селектор родственного элемента похож на соседний селектор, только он распространяется на все указанные элементы, следующие за выбранным. Синтаксис родственного селектора: селектор предыдущего элемента, знак "~" (тильда) и за ним селектор выбираемых элементов.
Пример исользования сестринского селектора.
Селектор родственного элемента в CSS
Привет!
Текст абзаца №1 в про невероятные приключения.
Текст абзаца №2 в про невероятные приключения.
Текст div №1 в про невероятные приключения.
Текст абзаца №3 в про невероятные приключения.
Из примера видно, что после
тега текст абзаца №3 также был красным цветом. То есть, для присвоения стиля сестринские элементы не должны идти друг за другом.
Универсальный селектор
Если в селекторе правила CSS указан символ "*", то это правило применяется ко всем элементам страницы без исключения. Сложно представить себе случай, когда такое правило имеет смысл. Но есть один случай когда разработчик хочет "обнулить" все внешние и внутренние отступы. Тогда нужно использовать такой стиль:
* {
margin: 0;
padding: 0;
}
Но символ "*" можно использовать в составных селекторах.
Ul * {color: red}
Этот код назначает красный цвет тексту всех потомков элемента
.
Классы
Классы в CSS - самый расрпостранённый способ назначения стиля группе элементов. Класс применяют когда нужно задать разные стили элементам html-документа, созданным одним тегом. Синтаксис класса:
Тег.Имя класса
В селекторе стиля вначале пишется нужный тег, затем, через точку указывается имя класса. Имя класса должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).
Пример, когда применяют классы: на сайте верхнее, боковое и нижнее меню создаётся при помощи тегов
, этим трём меню нужно создать три различных стиля. В CSS создают три класса ul.menu-top
, ul.menu
и ul.menu-bottom
.
В теле html-документа различные меню создаются с указанием класса в атрибуте class
:
class
="menu-top
"> ...
class
="menu
"> ...
class
="menu-bottom
"> ...
Классы - часто используемы инструмент CSS. Он удобен и, кроме того, делает код стиля более читаемым.
Можно создать класс, который будет применён к любому тегу. Для этого используется универсальный селектор.
*.Имя класса
{ свойство1
: значение
; свойство2
: значение
; ... }
Эту запись можно сократить, убрав символ "*".
Имя класса
{ свойство1
: значение
; свойство2
: значение
; ... }
ID селекторы (идентификаторы)
Идентификаторы - это типы селекторов, задающие уникальное имя элемента. Уникальное - значит встречающееся один раз в коде документа. При помощи идентификаторов можно создать стиль, но их основное предназначение - обращение к ним при помощи скриптов.
При описании идентификатора вначале указывается символ решётки (#), затем идет имя идентификатора.
#Имя идентификатора
{ свойство1
: значение
; свойство2
: значение
; ... }
Также, как и имя класса, имя идентификатора должно начинаться с латинской буквы и может содержать в себе символы дефиса (-) и подчеркивания (_).
Селекторы атрибутов
В HTML есть ряд тегов, которые в зависимости от атрибутов меняют своё действие. Например, тег
зависимости от значения атрибута type
может создавать поле формы, кнопку и другие элементы формы. Так что, если применять стиль к селектору input
, то он изменит все элементы формы, созданные этим тегом. Для точного управления такими элементами в CSS существуют селекторы атрибутов.
Селекторы атрибутов бывают разные. При помощи селекторов атрибутов можно установить стиль тегу, если у него есть определённый атрибут или если определённый атрибут тега имеет определённое значение.
Селекторы атрибутов - тема отдельной большой статьи. В рамках этой статьи мы лишь отметим, что они есть.
Псевдоклассы
Ещё одна большая тема в CSS - псевдоклассы. Приставка "псевдо" обозначает мнимость или ложность. Дело в том, это элементы html документа меняются в зависимости от действий пользователя. Например ссылка меняется в зависимости от наведения на неё курсора.
Селектор:псевдокласс
{ свойство1
: значение
; свойство2
: значение
; ... }
Можно применять псевдоклассы к селекторам идентификаторов или классов (ul.menu:hover
{color
: green
}).
Для новичков отмечу: если именам классов и идентификатов разработчик придумывает названия сам, то имена псевдоклассов в CSS - это зарезервированные слова.
Псевдокласс :active
выполняет правило стиля, если элемент активен. Например, на ссылку наведён курсор и произведён клик. Псевдокласс :hover
- курсор мыши просто наведён на элемент, например на ссылку.
Есть ещё много псевдоклассов. Полностью раскрыть тему псевдоклассов можно в рамках отдельной статьи. Тут мы коснулись её лишь поверхностно.
Псевдоэлементы
При помощи псевдоэлементов можно добавлять в контент страницы дополнительное содержимое, которого нет в исходном коде. Также можно изменять часть элемента, например первую букву в абзаце. То есть создаваль мнимый элемент html - первую букву со своим стилем отображения.
Псевдоэлементы CSS также обширная тема, для полного раскрытия которой требуется отдельная статья.
Синтаксис псевдоэлементов такой же, как и у псевдоклассов:
Селектор:псевдоэлемент
{ свойство1
: значение
; свойство2
: значение
; ... }
Селектор в CSS — это указатель
на элемент или группу элементов, к которым будут применяется правила стилей. Существуют следующие виды селекторов:
1. Селекторы по тэгам
: h1
2. Селектор по id
: #main
3. Селекторы по классам
: .hidden
4. Селектор по нескольким классам
Записываются слитно без пробелов. Селекторы удовлетворяющие одновременно сразу нескольким условиям (логическое “И”). Стили будут применяться ко всем элементам, которые одновременно имеют и класс.hidden и класс.closed .
Hidden.closed
5. Контекстные селекторы
Разделяются пробелом. Такие селекторы используют для того, чтобы применить стили к элементу, только если он вложен
в нужный элемент.
P
strong
ul
.selected
.header
.menu
a
6. Соседние селекторы
Выделяет последующий элемент. Записываются с помощью знака + . Читается как: применить свойства к селектор2 который должен быть сразу после
селектор1 .
Стили применяются к элементу, подходящему под селектор2 , только если перед ним расположен элемент, подходящий под селектор1 .
...
.green + .selected {}
В примере.green + .selected применит стили ко второму элементу, т.к. перед ним есть элемент с классом.green . Селектор.green + li тоже применит стили ко второму элементу, а селектор.selected + .green не сработает.
7. Родственные селекторы
Выделяет последующие элементы. Похожи на предыдущий, но с тем различием, что выбираются все следующие элементы
, а не только первый элемент.
item
Selected too
Not selected
...
ul ~ p {}
В данном примере будут выбраны все элементы p, идущие за ul. В то время, как при использовании селектора ul + p будет выбран только первый элемент.
8. Дочерние селекторы
Записываются с помощью знака > и распространяются только на элементы первого уровня вложенности. На элементы вложенные в другие элементы не распространяются.
Ul
> li
{}
В случае контекстных селекторов они влияют на всех потомков (например если задать ul li) что не всегда удобно. Дочерние селекторы позволяют задать стили только для элементов первого уровня вложенности.
ul > li означает то же, что и ul li , но выбираются только li первого уровня вложенности, которые напрямую являются вложенными в ul. На li вложенные в другие дочерные li элементы, правила уже не будут действовать.
9. Селекторы атрибутов
Чаще всего используются при работе с формами. Селекторы атрибутов записываются с использованием квадратных скобок элемент[атрибут] .
Примеры селекторов атрибутов:
Input
input
div
a
a
a
a
В примере выше ~ позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой, например из:
10. Глобальный селектор
Селектор * выберет все
элементы. Его также можно использовать для выделения дочерних элементов:
Псевдокласс отрицания:not бывает очень полезным. Например, когда необходимо выбрать все div, за исключением того, который имеет id container.
Последнее обновление: 21.04.2016
Определение стиля начинается с селектора. Например:
Div{
width:50px; /* ширина */
height:50px; /* высота */
background-color:red; /* цвет фона */
margin: 10px; /* отступ от других элементов */
}
В данном случае селектором является div . Ряд селекторов наследуют название форматируемых элементов, например, div, p, h2 и т. д.
При определении такого селектора его стиль будет применяться ко всем элементам соответствующих данному селектору. То есть выше определенный стиль будет
применяться ко всем элементам
Здесь на странице 3 элемента div, и все они будут стилизованы:
Классы
Иногда для одних и тех же элементов требуется различная стилизация. И в этом случае мы можем использовать классы.
Для определения селектора класса в CSS перед названием класса ставится точка:
RedBlock{
background-color:red;
}
Название класса может быть произвольным. Например, в данном случае название класса - "redBlock". Однако при этом в имени класса разрешается использовать буквы, числа, дефисы и знаки подчеркивания,
причем начинать название класса должно обязательно с буквы.
Также стоит учитывать регистр имен: названия "article" и "ARTICLE" будут представлять разные классы.
После определения класса мы можем его применить к элементу с помощью атрибута class
. Например:
Определим и используем несколько классов:
Классы CSS
Классы CSS
Идентификаторы
Для идентификации уникальных на веб-станице элементов используются идентификаторы, которые определяются с помощью атрибутов id. Например, на странице
может быть головной блок или шапка:
Определение стилей для идентификаторов аналогично определению классов, только вместо точки ставится символ решетки #:
Идентификаторы CSS
Шапка сайта
Основное содержимое
Однако стоит заметить, что идентификаторы в большей степени относятся к структуре веб-странице и в меньшей степени к стилизации. Для стилизации
преимущественно используются классы, нежели идентификаторы.
Универсальный селектор
Кроме селекторов тегов, классов и идентификаторов в css также есть так называемый универсальный селектор
,
который представляет знак звездочки (*). Он применяет стили ко всем элементам на html-странице:
*{
background-color: red;
}
Стилизация группы селекторов
Иногда определенные стили применяются к целому ряду селекторов. Например, мы хотим применить ко всем заголовкам подчеркивание. В этом случае
мы можем перечислить селекторы всех элементов через запятую:
Селекторы CSS
CSS3
Селекторы
Группа селекторов
Некоторый текст...
Группа селекторов может содержать как селекторы тегов, так и селекторы классов и идентификаторов, например:
H1, #header, .redBlock{
color: red;
}
CSS содержит правила стиля, которые интерпретируются браузером, а затем применяются к соответствующим элементам вашего документа. Правило стиля состоит из трех частей:
Селектор
- это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например,
или
и т.д.
Свойство
- это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.
Значение
- задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.
Синтаксис селекторов в CSS следующий:
Селектор { свойство: значение }
Пример.
Вы можете задать границу таблицы следующим образом:
Table {
border: 2px solid #FF8C00;
}
Здесь синтаксис селектора такой: table - это селектор, а border - свойство, а 2px solid #FF8C00 - значение этого свойства.
Вы можете задавать селекторы различными способами, как Вам будет удобно. Ниже представлены виды селекторов.>
Стандартные селекторы
Это тот же самый селектор, который Вы видели выше. Опять же, еще один пример, чтобы дать цвет всем заголовкам первого уровня:
H1 {
color: #8B4513;
}
Универсальные селекторы
Вместо того, чтобы выбирать элементы определенного типа, универсальный селектор вполне просто соответствует имени любого типа элемента:
* {
color: #808080;
}
Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.
Селекторы потомков или вложенные селекторы
Предположим, Вы хотите применить правило стиля к определенному элементу только тогда, когда оно находится внутри определенного элемента, то в этом Вам помогут вложенные селекторы или селекторы потомков. Как показано в следующем примере, правило стиля будет применяться к элементу только тогда, когда оно находится внутри тега
.
Ul em {
color: #CD5C5C;
}
Селекторы класса
Вы можете задать правила стиля для элементов на основе атрибута class. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.
Blue {
color: #0000FF;
}
class="blue"
. Вы можете сделать селектор класса немного более конкретным. Например:
H1.blue {
color: #0000FF;
}
с атрибутом class="blue"
.
Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:
Этот абзац будет оформлен классами center
и bold
.
ID селекторы
Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.
#blue {
color: #0000FF;
}
Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом id="blue"
. Вы можете сделать id селектор немного более конкретным. Например:
H1#blue {
color: #0000FF;
}
Это правило отображает содержимое в синем цвете только для элементов
с атрибутом id="blue"
.
Истинная мощность id селекторов - это когда они используются в качестве основы для селекторов-потомков, например:
#blue h2 {
color: #0000FF;
}
В этом примере все заголовки второго уровня будут отображаться в синем цвете, когда они будут находиться в тегах с атрибутом id="blue"
.
Дочерние селекторы
Вы уже знаете селекторы потомков. Существует еще один тип селектора, который очень похож на селекторы потомков, но имеет другую функциональность, это дочерний селектор. Рассмотрим следующий пример:
Body > p {
color: #0000FF;
}
Это правило будет отображать все абзацы в синем цвете, если они являются прямым дочерним элементом
. Другие абзацы, помещенные внутри других элементов типа
или
Соседние селекторы
HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример:
Strong + em {
color: #0000FF;
}
Это правило будет отображать содержимое тега в синем цвете, если он идет после элемента . Другие теги , идущие не после тега , не будут иметь никакого эффекта этого правила.
Селекторы атрибутов
Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:
Input {
color: #0000FF;
}
Преимущество использования селекторов атрибутов заключается в том, что элемент не изменяется, а цвет применяется только к нужным текстовым полям.
Для селектора атрибутов применяются следующие правила:
p - выбирает все элементы абзаца с атрибутом lang.
p - выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
p - выбирает все элементы абзаца, где атрибут lang содержит слово «ru».
p - выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».
Несколько правил стиля
Возможно, Вам потребуется определить несколько правил стиля для одного элемента. Вы можете задать эти правила для объединения нескольких свойств и соответствующих значений в один блок, как показано в следующем примере:
Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.
Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.
Группировка селекторов в CSS
Вы можете применить стиль для многих селекторов, если хотите. Просто отделите селектора запятой, как показано в следующем примере:
Это правило стиля будет применено к элементам h1, h2 и h3. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.
Вы можете группировать различные id селектора вместе, как показано ниже: