Виды CSS селекторов. CSS Selectors
Селектор - это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.
Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.
К простым селекторам относятся:
- селектор типа
- универсальный селектор
- селекторы атрибутов
- селектор идентификатора
- селектор класса
- псевдо-классы
| CSS селектор | Пример | Описание | CSS |
|---|---|---|---|
| .class | .myClass | Выбирает все элементы с классом myClass (class="myClass"). | 1 |
| #id | #main | Выбирает элемент с идентификатором main (id="main"). | 1 |
| * | Выбор всех элементов. | 2 | |
| элемент | span | Выбор всех элементов . | 1 |
| элемент,элемент | div,span | Выбор всех элементов и всех элементов .
|
1 |
| [атрибут] | Выбирает все элементы с атрибутом title . | 2 | |
| [атрибут="значение"] | Выбирает все элементы с атрибутом title , значение которого в точности совпадает со значением указанным в селекторе (title="cost"). | 2 | |
| [атрибут~="значение"] | Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) "один" (title="один и два"). | 2 | |
| [атрибут|="значение"] | Выбор всех элементов с атрибутом lang , значение которого начинается с "ru". | 2 | |
| [атрибут^="значение"] | a | Выбор каждого элемента с атрибутом href , значение которого начинается с "https". | 3 |
| [атрибут$="значение"] | Выбирает все элементы с атрибутом src , значение которого оканчивается на ".png" (src="some_img.png"). | 3 | |
| [атрибут*="значение"] | Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) "один" (title="один и два"). | 3 |
Составной селектор - это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор.
Span.className p.className1.className2#someId:hover
Сложный селектор - это последовательность селекторов, которые разделены комбинаторами.
Список селекторов - это селекторы, перечисленные через запятую.
Комбинаторы
Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.
Псевдо-классы
Псевдо-класс – это простой селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом.
| Псевдо-класс | Пример | Описание | CSS |
|---|---|---|---|
| :link | a:link | Выбор всех не посещенных ссылок. | 1 |
| :visited | a:visited | Выбор всех посещенных ссылок. | 1 |
| :active | a:active | Выбор активной ссылки. | 1 |
| :hover | a:hover | Выбор ссылки при наведении курсора мышки. | 1 |
| :focus | input:focus | Выбор элемента , который находится в фокусе. | 2 |
| :first-child | p:first-child | Выбор каждого элемента Который является первым дочерним элементом своего родителя. |
2 |
| :lang(язык) | p:lang(ru) | Выбор каждого элемента С атрибутом lang , значение которого начинается с "ru". |
2 |
| :first-of-type | p:first-of-type | Выбор каждого элемента Который является первым из элементов
|
3 |
| :last-of-type | p:last-of-type | Выбор каждого элемента Который является последним из элементов Своего родительского элемента. |
3 |
| :only-of-type | p:only-of-type | Выбор каждого элемента Который является единственным элементом Своего родительского элемента. |
3 |
| :only-child | p:only-child | Выбор каждого элемента Который является единственным дочерним элементом своего родительского элемента. |
3 |
| :nth-child(n) | p:nth-child(2) | Выбор каждого элемента Своего родительского элемента. |
3 |
| :nth-last-child(n) | p:nth-last-child(2) | Выбор каждого элемента Который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента. |
3 |
| :nth-of-type(n) | p:nth-of-type(2) | Выбор каждого элемента Который является вторым дочерним элементом Своего родительского элемента. |
3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Выбор каждого элемента Который является вторым дочерним элементом Своего родительского элемента, считая от последнего дочернего элемента. |
3 |
| 3 | |||
| :not(селектор) | :not(p) | Выбор всех элементов, кроме элемента . |
3 |
Псевдо-элементы
Псевдо-элемент – это виртуальный элемент, который не существует в явном виде в дереве элементов документа. Псевдо-элементы используются для выбора тех частей элемента, которые не могут быть выбраны с помощью других селекторов, а также для стилизации не всего элемента, а отдельных его частей.
Совокупность правил оформления (которые в свою очередь состоят из селекторов с блоком объявлений) примененных к определенным html тегам, за счет чего и формируется внешний вид сайта.
CSS селектор – это составная часть CSS правила отвечающая за определение конкретных html тегов, к которым будут применены стили оформления, прописанные в этом правиле.
Так, именно благодаря селекторам браузер понимает к каким именно элементам кода страницы нужно применять конкретные стили оформления.
Инструмент выбора элементов в CSS отличается крайней гибкостью и удобством выбора как отдельных элементов кода, так и целых групп элементов определенных по тем или иным признакам.
Виды css селекторов
Как и предложения в тексте селекторы CSS бывают простыми и сложными. Разница между ними заключается в том, что сложные получаются из объединения нескольких простых и используются для более точной настройки конечного оформления ресурса.
Только в отличие от обычных текстов в каскадных таблицах стилей имеет значение в каком порядке и какие селекторы мы будем использовать. Причем от этого будет зависеть не только то, какие элементы и по какому признаку мы выберем, а и скорость обработки нашего кода в целом, но о тонкостях мы поговорим в дальнейших статьях.
Простые селекторы
- Универсальный селектор – отвечает за выбор вообще всех элементов в документе. Задается звездочкой. Обычно применяется для обнуления стилей браузеров, установленных в них по умолчанию, чтобы у всех, кто будет заходить на сайт не уплыло оформление в случае использования каких-то собственных настроек браузера или же различных плагинов…
* { какой- то стиль; }
- Селектор типа – выбирает все теги, соответствующие определенному типу. Задается названием тега. Используется для задания общих правил оформления документа, к примеру, задать разные шрифты заголовкам и простому тексту документа.
h1 { какой- то стиль; }
- – применит правило цсс ко всем тегам с конкретным названием класса. Задается точкой с написанным сразу после нее названием класса. Пожалуй самый часто встречающийся в верстке селектор. Обычно используется, чтобы задавать различные стили оформления тегам одинаковым по типу, но разным по функциональному назначению.
LeftColumn { какой- то стиль; }
- Селектор идентификатора – применяется для оформления уникальных элементов на странице. Задается решеткой после которой идет название id. Используется, если нужно оформить один конкретный элемент страницы.
#alertButton { какой- то стиль; }
- – выбирает теги у которых присутствует атрибут. Задается названием атрибута в квадратных скобках. Может использоваться как для оформления группы тегов в которых просто присутствует заданный атрибут, так и для группы тегов в которых присутствует заданный атрибут с определенным значением.
[ type] { какой- то стиль; } [ type= "submit" ] { какой- то стиль; } input[ type= "submit" ] { какой- то стиль; }
Сложные селекторы
- Селектор потомка – выбор потомков (тегов находящихся внутри другого тега) элементов. Задается через пробел (родитель – пробел – потомок).
div p { какой- то стиль; }
- Селектор дочернего элемента - выбор элемента непосредственно вложенного в другой элемент. Задается символом «>» (родитель-галочка-дочерний элемент). Дочерний элемент отличается от потомка тем, что следует непосредственно после родителя (первый уровень вложенности). В то время как потомком считается любой тег внутри другого не зависимо от уровня вложенности.
Sidebar> ul { какой- то стиль; }
- Селектор сестринского элемента – выбирает тег идущий сразу после другого тега (не заключенный внутрь, а идущий далее). Задается плюсом (первый элемент – плюс – сестринский элемент). На практике используется редко. Обязательным условием применение является наличие общего родителя для всех элементов объединенным знаком «+».
h1+ p { какой- то стиль; }
Псевдоклассы и псевдоэлементы
Вышеперечисленная классификация селекторов CSS зависела исключтиельно от разметки документа. Если мы хотим задать изменение внешнего вида элементов в зависимости от изменения его состояния на странице (к примеру смена цвета кнопки при наведении), то мы можем использовать селекторы псевдоклассов и псевдоэлементов .
- Помните, что в отличие от html в CSS регистр букв имеет значение. Тоесть класс.active и.Active это не одно и то же! Они применятся к разным элементам, если таковые есть в документе.
- Называйте селекторы для оформления так, чтобы потом в них не запутаться: .leftColumn – хорошее название, .left – зависит от ситуации, но уже неочень, .llll – фигня какаято, ты сам то скажешь не глядя на код откуда этот класс взялся?
- Еще раз напоминаю – если элемент на странице один, такой весь уникальный, то для него используем id, если же есть вероятность, что появится еще один такой или же просто подобных элементов на странице несколько, то пользуйтесь для оформления классами.
Подводя итоги
Селекторы в CSS – это мощнейший инструмент идентификации определенных элементов страницы или же группы элементов объединенных конкретным признаком для дальнейшего применения к ним стилей оформления из блока объявлений относящегося к данному селектору.
После освоения общих принципов взаимодействия и создания селекторов вы забудете о проблемах с оформлением веб-документов. Хорошее знание селекторов позволяет значительно сократить время верстки html страниц.
Тема хоть и кажется крайне запутанной на первый взгляд становится простой и понятной после некоторого периода практики, подкрепленного качественной теорией.
CSS селекторы – одна из главных особенностей языка CSS. Селекторы позволяют обратиться как к группе элементов, так и к только одному из них.
Селекторы в CSS
Селекторы нужны для того, чтобы указать браузеру, к каким элементам применять стили, описанные в фигурных скобках.
P{
Стили…
}
В данном случае селектором выступает p – тег абзацев. Такое правило добавит стили для всех абзацев на веб-странице.
Какими бывают css селекторы?
Селектор тега – самый простой
. Он был продемонстрирован в примере. Чтобы записать его в css, нужно написать имя тега без угловых скобок. Стили будут применены ко всем элементам с таким тегом.
Table{} – стили для всех таблиц
Li{} – стили для всех пунктов списка
A{} – стили для всех ссылок
Стилевой класс
– к любому элементу на веб-странице можно привязать стилевой класс. Даже к одной букве. Потом в css-файле можно обратиться к этому элементу, прописав для него собственные стили. Для этого нужно поставить точку и написать имя стилевого класса после нее. Примеры:
.about{} – правила применятся ко всем элементам, которые имеют атрибут class = “about”
.down{} – правила применятся ко всем элементам, которые имеют атрибут class = “down”
.float{} – правила применятся ко всем элементам, которые имеют атрибут class = “float”
Как видите, главное поставить точку. Стилевой класс можно привязывать к неограниченному количеству элементов. Элементу можно прописать несколько классов.
Идентификатор – еще один вид селекторов. Один идентификатор можно задать только одному элементу. Он не может иметь двух идентификаторов, а также id привязанный к этому элементу, не может быть прописан нигде более.
Задается он так:
Абзац
То есть также, как и класс, только используется атрибут id в качестве значения которого используется любое слово.
Чтобы обратиться к элементу с идентификатором через css нужно написать значение id и перед ним поставить решетку.
#first{
Font-size: 22px
}
Мы обратились к абзацу с id = first . Стиль применится только к нему. У остальных абзацев размер шрифта не изменится.
Селектор в 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. Глобальный селектор
Селектор * выберет все элементы. Его также можно использовать для выделения дочерних элементов:
* { margin: 0; padding: 0; } .content * { outline: none; }
11. Псевдоклассы
Примеры псевдоклассов:
A:link a:visited a:active a:hover input:checked .clearfix:after {} div:not(#container) p::first-line p::first-letter
Псевдокласс отрицания:not бывает очень полезным. Например, когда необходимо выбрать все div, за исключением того, который имеет id container.
". Итак, селектор - это элемент, к которому применяется объявление в правиле стиля.
Термины, используемые в описании правил CSS.
Рис.1. Обычное правило CSS. Рис.2. Пример правила CSS.
Коротко про синтаксис записи правил CSS:
- Объявление стиля в парвиле берётся в фигурные скобки - {}
- Свойство и значение в объявлении разделяются двоеточием - :
- В одном объявлении (в одной паре фигурных скобок) может быть указано сколько угодно пар свойство: значение
- В конце каждой пары свойство: значение ставится точка с запятой - ;
- После последней пары свойство: значение точку с запятой ставить не обязательно.
- Синтаксис CSS не чувствителен пробельным символам (пробелы, табуляция, переносы сток).
- Синтаксис CSS не чувствителен к регистру символов.
В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.
Селекторы тегов
Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.
Привет!
Заголовок h2!
Кстати, можно группе селекторов задать одно объявление. Например, мы хотим чтобы теги заголовков
,
и
были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:
были синего цвета и выравнивались по центру блока. Для этого можно в селекторе перечислить эти теги, разделив их запятой. Вот пример кода:
Привет h1!
Заголовок h2!
Такая запись стиля равносильна следующей группе правил:
Селекторы потомков
Можно назначать стилевые правила элементам в зависимости от того, вложен ли этот элемент в другой. Если один тег вложен в другой, то вложенный тег называется его потомком, а тег в который вложен потомок называется предком. Например, нужно задать абзацам
Внутри таблицы
Привет!Текст абзаца в таблице. |
Текст абзаца вне таблицы.
Все теги
Во всех таблицах документа будут отображать цвет красным цветом. Обратите внимание, то тег
Находящийся внутри тега
На самом деле, вместо
, так как тег
|
