CSS селекторы
Селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.
Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.
К простым селекторам относятся:
- селектор типа
- универсальный селектор
- селекторы атрибутов
- селектор идентификатора
- селектор класса
- псевдо-классы
Составной селектор — это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор.
Сложный селектор — это последовательность селекторов, которые разделены комбинаторами.
Список селекторов — это селекторы, перечисленные через запятую.
Комбинаторы
Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.
Псевдо-классы
Псевдо-класс – это простой селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом.
| Псевдо-класс | Пример | Описание | CSS |
|---|---|---|---|
| :link | a:link | Выбор всех не посещенных ссылок. | 1 |
| :visited | a:visited | Выбор всех посещенных ссылок. | 1 |
| :active | a:active | Выбор активной ссылки. | 1 |
| :hover | a:hover | Выбор ссылки при наведении курсора мышки. | 1 |
| :focus | input:focus | Выбор элемента <input> , который находится в фокусе. | 2 |
| :first-child | p:first-child | Выбор каждого элемента <p> , который является первым дочерним элементом своего родителя. | 2 |
| :lang(язык) | p:lang(ru) | Выбор каждого элемента <p> с атрибутом lang , значение которого начинается с "ru". | 2 |
| :first-of-type | p:first-of-type | Выбор каждого элемента <p> , который является первым из элементов <p> своего родительского элемента. | 3 |
| :last-of-type | p:last-of-type | Выбор каждого элемента <p> , который является последним из элементов <p> своего родительского элемента. | 3 |
| :only-of-type | p:only-of-type | Выбор каждого элемента <p> , который является единственным элементом <p> своего родительского элемента. | 3 |
| :only-child | p:only-child | Выбор каждого элемента <p> , который является единственным дочерним элементом своего родительского элемента. | 3 |
| :nth-child(n) | p:nth-child(2) | Выбор каждого элемента <p> , который является вторым дочерним элементом своего родительского элемента. | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Выбор каждого элемента <p> , который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента. | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Выбор каждого элемента <p> , который является вторым дочерним элементом <p> своего родительского элемента. | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Выбор каждого элемента <p> , который является вторым дочерним элементом <p> своего родительского элемента, считая от последнего дочернего элемента. | 3 |
| :last-child | p:last-child | Выбор каждого элемента <p> , который является последним элементом своего родительского элемента. | 3 |
| :root | :root | Выбор корневого элемента в документе. | 3 |
| :empty | p:empty | Выбор каждого элемента <p> , который не содержит дочерних элементов (включая текст). | 3 |
| :target | :target | Выбор текущего целевого элемента на странице, то есть элемента, к которому был осуществлён переход по ссылке внутри страницы. | 3 |
| :enabled | input:enabled | Выбор каждого включенного элемента <input> . | 3 |
| :disabled | input:disabled | Выбор каждого выключенного элемента <input> . | 3 |
| :checked | input:checked | Выбор элемента <input> , выбранного по умолчанию или пользователем. | 3 |
| :not(селектор) | :not(p) | Выбор всех элементов, кроме элемента <p> . | 3 |
Псевдо-элементы
Псевдо-элемент – это виртуальный элемент, который не существует в явном виде в дереве элементов документа. Псевдо-элементы используются для выбора тех частей элемента, которые не могут быть выбраны с помощью других селекторов, а также для стилизации не всего элемента, а отдельных его частей.
Знаете ли вы селекторы?
Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.
Поэтому эти селекторы необходимо знать.
Основные виды селекторов
Основных видов селекторов всего несколько:
- * – любые элементы.
- div – элементы с таким тегом.
- #id – элемент с данным id .
- .class – элементы с таким классом.
- [name="value"] – селекторы на атрибут (см. далее).
- :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).
Селекторы можно комбинировать, записывая последовательно, без пробела:
- .c1.c2 – элементы одновременно с двумя классами c1 и c2
- a#id.c1.c2:visited – элемент a с данным id , классами c1 и c2 , и псевдоклассом visited
Отношения
В CSS3 предусмотрено четыре вида отношений между элементами.
Самые известные вы наверняка знаете:
- div p – элементы p , являющиеся потомками div .
- div > p – только непосредственные потомки
Есть и два более редких:
Посмотрим их на примере HTML:
Фильтр по месту среди соседей
При выборе элемента можно указать его место среди соседей.
Список псевдоклассов для этого:
:first-child – первый потомок своего родителя.
:last-child – последний потомок своего родителя.
:only-child – единственный потомок своего родителя, соседних элементов нет.
:nth-child(a) – потомок номер a своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1 .
:nth-child(an+b) – расширение предыдущего селектора через указание номера потомка формулой, где a,b – константы, а под n подразумевается любое целое число.
Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо n . Например: — :nth-child(2n) даст элементы номер 2 , 4 , 6 …, то есть чётные.
CSS/Селекторы
Селектор выбирает элементы, для которых применяются пары свойство и значение.
Где body — это селектор, background-image и font-size — это свойства, а url("image.gif") и 18px — значения.
Виды селекторов [ править ]
- Селектор тегов, в качестве селектора выступает имя тега, для которого необходимо изменить свойства.
- Универсальный селектор, который обозначается символом * и применяется для изменения необходимых свойств всех элементов на странице.
- Классы, применяются для элементов с атрибутом class и необходимым значением.
- Идентификаторы, применяются для элементов с атрибутом id и необходимым значением. Основное отличие классов от идентификаторов состоит в том, что имена вторых должны быть уникальными, не повторяться, что позволяет их использовать вместе со скриптами (JavaScript). предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со ссылками ( :link , :visited , :hover , :active , :focus ). Псевдо-элементы определяют стиль элементов, чётко не определённых в структуре документа ( :first-letter , :first-line ), а также позволяют генерировать и стилизовать несуществующее содержимое ( :before , :after и свойство content ). В CSS3 псевдо-элементы начинаются с двух двоеточий :: ( ::first-letter , ::first-line , ::before , ::after ).
- Селекторы атрибутов. Позволяют стилизовать элемент не только по значению тега, но и по значению атрибута (a[attr]).
- Контекстные селекторы. Стилизация элементов, находящихся внутри другого элемента (a b).
- Дочерние селекторы. Стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком (a > b).
- Соседние селекторы. Предназначены для стилизации соседних элементов, у которых общий родитель. (a + b)
- Родственные селекторы. Похожи с соседними селекторами, но с тем различием, что стилизуются все соседние элементы, а не только первый соседний элемент. Впервые появились в CSS3. (a
Селектор class [ править ]
Допустим, мы хотим сделать страницу, на которой будет два вида абзацев <p> , причём оба вида будут постоянно чередоваться и часто повторяться.
Пример такой страницы — интервью, в котором чередуются вопросы журналиста и ответы человека. Конечно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Мы можем создать в одной таблице стилей два различных класса абзацев с помощью селектора класса. Это будет выглядеть так:
В приведённом примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным курсивом, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов чёрного цвета. Вы можете создавать любое количество классов для любых элементов страницы.
Селектор id [ править ]
Возьмём следующий пример. Например, вы хотите создать на странице какие-либо уникальные элементы, к которым в будущем захотите вернуться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление с помощью CSS. На этот случай в таблицах стилей есть возможность присваивать уникальным элементам идентификатор (id). Вот пример назначения идентификатора и правило CSS для таких элементов. Пример:
Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов на странице: