Что такое селектор css

Что такое селекторы в html

Селектор — это часть 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. Виды, группировка и специфичность

В этом CSS правиле, p — это селектор , в данном случае — это селектор элемента . Это CSS правило устанавливает стили (CSS свойства, описанные в нём) для всех элементов p на странице.

В CSS очень много различных типов селекторов. Используя один из них или комбинацию из нескольких можно очень точно применить стили к нужным элементам.

Базовые селекторы

К базовым селекторам можно отнести селектор по классу, тегу, идентификатору, атрибуту и универсальный селектор.

Селектор по элементу (тегу)

Селектор по элементу предназначен для выбора элементов по имени тега.

Пример задания правила для всех элементов p на странице:

Селектор по классу

Селектор по классу предназначен для выбора элементов по классу (значению атрибута class ).

Пример задания правила для всех элементов, имеющих класс center :

Селектор по идентификатору (id)

Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id ).

Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer :

Универсальный селектор

Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.

Пример задания правила для всех элементов на странице:

CSS селекторы по атрибуту

Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.

Типы селекторов по атрибуту:

• [attr] – по имени атрибута;
• [attr=value] – по имени и значению атрибута;
• [attr^=value] – по имени и значению, с которого оно должно начинаться;
• [attr|=value] – по имени атрибута и его значению, которое равно value или начинается со value- ;
• [attr$=value] – по имени атрибута и значению, на которое оно должно заканчиваться;
• [attr*=value] – по указанному атрибуту и значению, которое должно содержать value ;
• [attr

[attr&#93

Пример задания правила для всех элементов на странице, имеющих атрибут target :

[attr=value&#93

Пример задания правила для всех элементов на странице, имеющих атрибут rel со значением nofollow :

[attr^=value&#93

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого начинается с col :

[attr|=value&#93

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого равно test или начинается с test- (т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):

[attr$=value&#93

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого заканчивается на color :

[attr*=value&#93

Пример задания правила для всех элементов на странице, имеющих атрибут href , значение которого содержит подстроку youtu.be (например будет выбран элемент, если атрибут href у него равен https://youtu.be/TEOSuiNfUMA ):

Пример задания правила для всех элементов на странице, имеющих атрибут data-content , значение которого содержит news , отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football ):

Псевдоклассы

Псевдоклассы предназначены для более точного выбора элементов в зависимости от их динамического состояния или расположения. С помощью них можно, например, установить стили элементу при поднесении к нему курсора или стилизовать элемент в зависимости от того какой он имеет порядковый номер.

Псевдоклассы — это дополнение к основному селектору, которое позволяет выбрать элемент в зависимости от его особого состояния. Добавляется он к селектору c помощью символа : , т.е. так селектор:псевдокласс .

Псевдоклассы для выбора элементов в зависимости от их состояния

К этой группе псевдоклассов можно отнести псевдоклассы: :link , :visited , :hover , :active и :focus .

Псевдоклассы :link и :visited предназначены исключительно для ссылок (элементов a с атрибутом href ).

Псевдоклассы :hover , :active и :focus могут применяться не только к ссылкам, но и к другим элементам.

Псевдокласс :link

Псевдокласс :link предназначен для выбора не посещённых ссылок.

Пример задания правила для всех элементов a с классом external , которые пользователь ещё не посетил:

Псевдокласс :visited

Псевдокласс :visited предназначен для выбора посещённых ссылок.

Пример задания правила для всех элементов a , расположенных в .aside , пользователь которые уже посетил:

Псевдокласс :active

Псевдокласс :active предназначен для выбора элементов в момент когда они активируются пользователем. Например, когда пользователь нажал левой кнопкой мышкой на ссылку, но её ещё не отпустил. В основном данный класс применяется для ссылок ( a ) и кнопок ( button ), но может также использоваться и для других элементов.

Пример задания CSS правила для всех элементов a когда они активируются пользователем:

Псевдокласс :hover

Псевдокласс :hover предназначен для выбора элементов при поднесении к ним курсора (при наведении на них).

Пример задания CSS правила для всех элементов .btn-warning при поднесении к ним курсора:

При задании CSS-правил для ссылок с использованием псведоклассов :link , :visited , :hover и :active , их следует распологать в следеующем порядке:

Если CSS-правила расположить в другом порядке, то часть из них могут не работать.

Псевдокласс :focus

Предназначен для выбора элемента, который в данный момент находится в фокусе. Например, данное состояние может активироваться когда мы кликаем мышью в текстовое поле или переходим в него с помощью клавиши tab на клавиатуре.

Пример задания CSS правила для элемента input[type="text"] при нахождении его в фокусе:

По расположению среди соседей

При выборе элементов можно дополнительно с помощью псевдоклассов задать условие (фильтр) по их расположению (порядковому номеру) в родителе.

Псевдоклассы, предназначенные для этого: :first-child , :last-child , :only-child , :nth-child(выражение) , :nth-last-child(выражение) .

Псевдокласс :first-child

Псевдокласс :first-child применяется для выбора элементов, которые являются первыми дочерними элементами своего родителя.

Пример задания CSS правила для элементов li являющимися первыми дочерними элементами своего родителя:

Псевдокласс :last-child

Псевдокласс :last-child применяется для выбора элементов, которые являются последними дочерними элементами своего родителя.

Пример задания CSS правила для элементов .alert-warning , которые являются последними дочерними элементами своего родителя:

Псевдокласс :only-child

Псевдокласс :only-child используется для выбора элементов, если они являются единственными дочерними элементами внутри родительского контейнера.

Селектор h2:only-child выберет все элементы h2 , если они являются единственными дочерними элементами своего родителя.

Действие аналогичное :only-child можно выполнить с помощью псевдоклассов :first-child и :last-child . Например селектор h2:only-child можно ещё реализовать так: h2:last-child:first-child .

Псевдокласс :nth-child(выражение)

Псевдокласс :nth-child() применяется для выбора элементов по их порядковому номеру в родителе. В качестве выражения можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.

Формула имеет следующую запись: An + B . A и B — это числа, а n — счетчик, принимающий целые значения, начиная с 0 (т.е. 0, 1, 2, 3 . ).

Например, формула вида 3n + 2 будет определять элементы с порядковыми номерами (2, 5, 8, . ). Т.е. 3 * 0 + 2 , 3 * 1 + 2 , 3 * 2 + 2 , .

А например, формула вида 5n будет определять элементы с порядковыми номерами (0, 5, 10, . ). Т.е. 5 * 0 , 5 * 1 , 5 * 2 , .

Псевдокласс :nth-last-child(выражение)

Псевдокласс :nth-last-child() выполняет те же действия что и :nth-child() за исключением того, что отсчет элементов в родителе вёдется не с начала, а с конца. В псведоклассе :nth-last-child(выражение) в качестве выражения можно использовать те же вещи, т.е. число, формулу, или ключевые слова odd или even

По расположению среди соседей с учётом типа элемента

В CSS имеются псевдоклассы аналогичные :first-child , :last-child и т.д. Они отличаются от них только тем, что выполняют это с учётом типа элемента.

Список псевдоклассов, предназначенных для этого: :first-of-type , :last-of-type , :only-of-type , :nth-of-type(выражение) , :nth-last-of-type(выражение) .

Псевдокласс :first-of-type

Данный псевдокласс очень похож на :first-child , но в отличие от него он выбирает не просто первый элемент, а первый элемент своего родителя с учётом его типа .

Например, выберем все элементы p , которые являются первыми элементами указанного типа у своего родителя:

При использовании селектора p:first-child , не один элемент p не был выбран, т.к. не один из них не является первым дочерним элементом своего родителя.

Псевдокласс :last-of-type

Данный псевдокласс предназначен для выбора элементов, которые являются последними дочерними элементами данного типа своего родителя.

Псевдокласс :only-of-type

Псевдокласс :only-of-type применяется для выбора элементов, если каждый из них являются единственным дочерним элементом данного типа внутри своего родителя. В отличие от :only-child псведокласс :only-of-type работает аналогично, но с учётом типом элемента.

В этом примере стили будут применены к элементам p , которые являются единственным элементом p внутри своего родителя.

Псевдокласс :nth-of-type(выражение)

Данный псевдокласс предназначен для выбора элементов по их порядковому номеру в родителе с учетом их типа.

Псевдокласс :nth-of-type(выражение) похож на :nth-child(выражение) с разницей лишь а том, что он учитывает тип элемента. В качестве выражения также можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.

Селектор p:nth-child(2) выберет второй по счёту элемент, если он является p , а селектор p:nth-of-type(2) веберет второй дочерний элемент p среди дочерних p .

Псевдокласс :nth-last-of-type(выражение)

Псевдокласс :nth-last-of-type(выражение) аналогичен классу :nth-of-type(выражение) с разницей в том, что отсчёт дочерних элементов ведётся с конца.

Псевдоклассы для элементов форм

К этой группе можно отнести псевдоклассы :enabled , :disabled и :checked .

Псевдоклассы этой группы, а также :hover , :active и :focus ещё называют событийными селекторами, т.к. они позволяют применить стили при наступлении определённых событий.

Псевдокласс :checked

Псевдокласс :checked предназначен для выбора элементов radio , checkbox и option внутри select , которые находятся во включенном состоянии.

В этом примере фон элемента label при отмеченном checkbox выделяется цветом. Выбор включенного чекбокса выполняется с помощью псевдокласса :checked .

Псевдокласс :enabled

Псевдокласс :enabled предназначен для выбора включенных элементов формы, с которыми пользователь может взаимодействовать, например, нажать на него или внести текст.

Пример, в котором установим для всех включенных элементов input фон:

Псевдокласс :disabled

Элементы формы могут кроме включенного состояния находиться ещё в отключенном.

Псевдокласс :disabled предназначен для выбора отключенных элементов формы, т.е. элементов с которыми пользователь в данный момент не может взаимодействовать.

Например, выберем все отключенные элементы input :

Остальные псевдоклассы

Псевдокласс :not(селектор)

Псевдокласс :not() предназначен для выбора элементов, которые не содержат указанный селектор.

В качестве селектора можно указывать селекторы по тегам, классам, атрибутам, использовать псевдоклассы, т.е. всё кроме псведокласса :not() , несколько сгруппированных селекторов, псевдоэлементы, дочерние и вложенные селекторы:

При необходимости можно использовать несколько псевдоклассов :not() .

Пример CSS селектора для выбора элементов, которые не содержат некоторый класс:

Псевдокласс :empty

Псевдокласс :empty предназначен для выбора пустых элементов (т.е. элементов, у которых нет дочерних узлов, в том числе текстовых).

Селектор div:empty выберет все пустые элементы div на странице.

Псевдокласс :root

Псевдокласс :root предназначен для выбора корневого элемента документа. В HTML документе данным элементом является <html> . В отличие от селектора по тегу html данный псевдокласс имеет более высокий приоритет.

Применять :root можно например для объявления CSS переменных:

Псевдокласс :target

Псевдокласс :target предназначен для выбора элемента, идентификатор которого соответствует хэшу в URL-адресе.

В этом примере стили будут применены к элементу с , если хэш URL страницы будет равен #header-1 . Если же хэш будет равен #header-2 , то псевдокласс :target соответственно выберет элемент с и стили уже будут применены к нему.

Группировка селекторов

Для задания правил нескольким селекторам одновременно их необходимо перечислить через запятую.

Синтаксис: селектор1, селектор2, .

Пример задания правила для всех элементов h3 и h4 на странице:

Комбинирование селекторов

В CSS селекторы можно комбинировать. Осуществляется это очень просто, посредством последовательного их записывания, без использования пробела.

Пример селектора для выбора элементов, которые имеют одновременно два класса:

Пример селектора для выбора элементов, которые имеют указанный класс, атрибут, и является первым дочерним элементом в своём родителе:

Селекторы отношений

В HTML документе каждый элемент всегда связан с другими элементами.

Виды отношений между HTML элементами:

• родитель – элемент, непосредственно в котором находится рассматриваемый элемент;
• предок – это элемент, который расположен на одном из уровней иерархии элементов, до которого можно дойти двигаясь от рассматриваемого элемента к его родителю, от его родителя к родителю его родителя и т.д.
• дети – это элементы, непосредственно расположенные в текущем рассматриваемом элементе;
• потомки (дочерние элементы) – это любые элементы, которые находятся в текущем элементе вне зависимости от уровня иерархии, в котором они расположены;
• соседи (сиблинги) – это элементы, расположенные на том же уровне вложенности (иерархии), что и рассматриваемый элемент; или другими словами — это все другие элементы, которые имеют того же родителя что и текущий рассматриваемый элемент.

Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.

В CSS имеется 4 вида селекторов отношений.

Первые два из них X Y и X > Y относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других.

Остальные два X + Y и X

Y являются CSS селекторами для выбора соседних элементов.

Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак > (больше), знак + и

Селектор X Y (для выбора вложенных или дочерних элементов)

Селектор X Y (предок потомки) предназначен для выбора элементов Y , находящихся в X .

Другими словами, селектор X Y предназначен для выбора элементов Y , являющихся потомками элементов определяемым селектором X .

Селекторы X Y называют контекстными или вложенными.

Например, селектор дочерних элементов div p выберет все элементы p , расположенные в div .

Селектор X > Y

Селектор X > Y (родитель > дети) предназначен для выбора элементов, определяемым селектором Y непосредственно расположенных в элементе, определяемым селектором X .

По другому можно сказать, что селектор X > Y предназначен для выбора Y , у которых родителем является элемент, определяемым X .

Например, комбинация селекторов li > ul выберет все элементы ul , которые непосредственно расположены в li .

Селектор X + Y

Селектор X + Y предназначен для выбора элементов Y , каждый из которых расположен сразу же после X . Элементы определяемым селектором X и Y должны находиться на одном уровне вложенности, т.е. быть по отношению друг к другу соседями (сиблингами).

Например, комбинация селекторов input + label выберет все элементы label , которые расположены сразу же за элементом input , и являющиеся друг по отношению к другу соседями (сиблингами).

Селектор X

Y предназначен для выбора элементов Y , которые расположены после X . При этом элементы, определяемые селектором X и Y , должны являться по отношению друг к другу соседями (сиблингами).

span выберет все элементы span , расположенные после элемента p на том же уровне вложенности.

Приоритет селекторов

Когда в CSS имеется несколько правил, устанавливающих одно и тоже CSS свойство некоторому элементу, приоритетным из них является то, в котором селектор имеет большую специфичность (вес).

Специфичность селекторов удобно представлять в виде 4 чисел: 0,0,0,0 .

При этом сравнение селекторов по весу нужно выполнять слева направо. Если первая цифра одного селектора больше, чем у другого, то он является более специфичным и к элементу будет применяться CSS-свойство, заданное в нём. Если цифры равны, то выполняем сравнение следующих цифр селекторов и т.д.

Если у сравниваемых селекторов все цифры равны, то будет применяться тот, который ниже из них расположен по коду.

Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:

• универсальный селектор (не добавляет вес) – 0,0,0,0 ;
• селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – 0,0,0,1 ;
• селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – 0,0,1,0 ;
• селектор по идентификатору добавляют единичку ко второй цифре – 0,1,0,0 ;

Стили, расположенные в атрибуте style элемента, являются более специфичными по сравнению с селекторами. Вес этих стилей определяется единицей в первой цифре – 1,0,0,0 .

• * – 0,0,0,0 ;
• li – 0,0,0,1 ;
• li::before – 0,0,0,2 ;
• ul > li – 0,0,0,2 ;
• div input+label – 0,0,0,3 ;
• h1 + div&#91;data-target&#93; – 0,0,1,2 ;
• .btn.show – 0,0,2,0 ;
• ul li a.item – 0,0,1,3 ;
• #aside div.show – 0,1,1,1 ;
• style=". " – 1,0,0,0 ;

Повысить важность определённого CSS свойства можно с помощью ключевого слова !important . В этом случае будет использоваться именно данное CSS-свойство.

В этом примере элементу будет установлен тот фон к которому добавлено слово !important . !important перебивает любой вес.

Интересный случай, когда нужно определить какое значение CSS-свойства будет применено к элементу, если !important добавлено к нескольким из них.

В этом случае будет применено то значение CSS-свойства c !important у которого больше вес селектора.

К примеру, если добавить !important к CSS-свойству расположенному в style , то получим максимальную возможную специфичность, которую уже никак не перебьёшь.

В этом примере к элементу #message будет применено CSS-свойство font-size со значением 20px, т.к. хоть у каждого из них имеется состояние !importants , но специфичность style ( 1,0,0,0 ) больше чем у селектора p#message ( 0,1,0,1 ).

Каких селекторов нет в CSS

В CSS нет селектора для получения родительского элемента. Этот селектор может появиться в новой спецификации CSS, но в CSS3 так выбрать элемент нельзя.

Что такое селекторы CSS и как они работают?

Создание веб-сайта с нуля – это один из способов создать быстрый и легкий сайт, над которым у вас будет полный контроль. Однако создание, настройка и поддержка HTML-сайта потребуют технических знаний HTML, CSS и JavaScript, а также значительных временных затрат .

Хорошая новость в том, что есть много способов упростить эти этапы. Например, чтобы упростить процесс настройки вашего веб-сайта, вы можете использовать селекторы CSS.

Ниже мы подробнее рассмотрим, что такое селекторы CSS. Затем мы рассмотрим различные типы, как их можно использовать и как их комбинировать, чтобы создать веб-сайт, который будет выглядеть именно так, как вы хотите.

Что такое селекторы CSS?

Селекторы CSS используются для определения элементов, которые вы хотите стилизовать с помощью CSS. Есть много разных типов селекторов CSS, каждый со своим уникальным синтаксисом. Они сообщают браузеру, к каким элементам применять значения свойств CSS.

Элемент или элементы, на которые нацелен селектор CSS, называются «субъектом селектора». Субъект может быть выбран на основе его типа элемента, класса, имени идентификатора, заданного атрибута или псевдосостояния.

Благодаря такому количеству доступных различных типов вы не только можете быстрее настраивать свой сайт, но и можете сохранять детальный контроль над своим кодом.

Ниже мы объясним, как вы можете использовать селекторы CSS на своем сайте, а затем рассмотрим различные типы селекторов. Давайте начнем.

Как использовать селекторы в CSS

Есть два основных способа использования селекторов в CSS. Если у вас есть HTML и CSS в одном документе, вам просто нужно добавить селекторы CSS в раздел своей веб-страницы. Вы увидите этот метод в примерах ниже.

Однако вы также можете хранить свои HTML и CSS в отдельных документах. В этом случае у вас может быть документ HTML с меткой index.html и файл CSS с меткой style.css. Файл index.html должен включать строку кода, ссылающуюся на файл CSS, чтобы эти стили отображались на вашей веб-странице.

Этот HTML-файл будет выглядеть примерно так:

Обратите внимание на строку <link rel = "stylesheet" href = "style.css">? Это ссылка на ваш файл CSS. Этот файл будет включать только блоки селектора, которые вы увидите ниже, и другой настраиваемый CSS.

Теперь, когда мы прошли краткий обзор того, как работают селекторы CSS, давайте рассмотрим основные типы селекторов ниже.

Типы селекторов CSS

Ниже мы рассмотрим четыре основных типа селекторов CSS. Каждый из них может помочь вам выбрать разные группы элементов на веб-странице. Мы начнем с типа, который поможет вам ориентироваться на самые большие группы элементов, а затем перейдем к типам, которые станут более точными.

Для демонстраций ниже я буду использовать онлайн-редактор кода W3Schools. Это означает, что вы можете щелкнуть любую ссылку на исходный код, чтобы увидеть полный фрагмент кода за примером и попробовать свой собственный.

Универсальный селектор

Звездочка (*) – универсальный селектор в CSS. По умолчанию он выбирает все элементы в документе.

Однако его можно использовать в сочетании с пространствами имен. @namespace – полезное правило в документах с несколькими пространствами имен, таких как HTML5, встроенный SVG, MathML и / или XML. Вы можете использовать определенное пространство имен, чтобы ограничить универсальный селектор элементами только в этом пространстве имен.

Универсальный синтаксис селектора

Универсальный селектор может иметь следующий синтаксис:

• или * |<свойства стиля>– соответствует всем элементам
• ns | *
  
• | * <свойства стиля>– соответствует всем элементам без определенного пространства имен

Пример универсального селектора

Допустим, я хочу, чтобы каждый элемент на странице был оранжевым, тогда я могу использовать универсальный селектор.

Вот мой CSS с универсальным селектором, определяющим все элементы.

Выбор типа

Селектор типа выбирает все элементы HTML, имеющие заданное имя узла. Например, «a» выберет все элементы и применит к ним значения свойств CSS. «Вход» выберет все элементы , «охватит» все элементы и так далее.

Вы также можете использовать определенное пространство имен, чтобы ограничить селектор типа элементами только в этом пространстве имен.

Синтаксис выбора типа

Синтаксис селектора типа:

• элемент

Пример выбора типа

Допустим, мой документ содержит элементы абзаца и диапазона, и я хочу, чтобы элементы диапазона были выделены оранжевым цветом.

Вот мой CSS с селектором типа, определяющим элементы диапазона:

Селектор классов

Селектор класса выбирает все элементы с заданным именем класса. Например, .intro выберет любой элемент, имеющий класс «intro», так же как .index выберет любой элемент, имеющий класс «index».

Если вы используете фреймворк Bootstrap CSS с открытым исходным кодом, то вы заметите, что практически все его стили используют классы в качестве селекторов. Вы можете найти полный список классов Bootstrap на W3Schools.

Синтаксис селектора классов

Синтаксис селектора класса:

• .classname

Пример выбора класса

Допустим, я хочу изменить все элементы с на оранжевый цвет.

Вот мой CSS с селектором классов, определяющим все элементы с классом pastoral.

Согласно этим правилам, первый h1 не будет иметь оранжевого текста, а второй будет. Вот результат:

Селектор ID

Селектор ID выбирает элемент на основе его атрибута ID. Например, #toc выберет элемент с идентификатором toc. Обратите внимание, что этот селектор работает только в том случае, если значение, указанное в селекторе, точно соответствует атрибуту ID элемента.

Синтаксис селектора идентификатора

Синтаксис селектора идентификатора:

idname

Пример выбора идентификатора

Допустим, я хочу изменить цвет и выравнивание элемента с идентификатором hubspot..

Вот мой CSS с селектором идентификатора, определяющим элемент с идентификатором «hubspot».

Обратите внимание: если атрибут ID элемента написан в нижнем регистре и я использую букву «H» в моем селекторе CSS с заглавной буквы, то элемент не будет выбран.

Селектор атрибутов

Селектор атрибутов выбирает все элементы, для которых заданный атрибут или атрибут установлен на определенное значение. Например, [href] будет соответствовать всем ссылкам, тогда как [href = "hubspot”] будет соответствовать только ссылкам с “hubspot” в их URL.

Вы также можете использовать селектор атрибутов для применения правил CSS к элементам с заданным значением атрибута (а не только наличием атрибута). Поэтому, если я хочу стилизовать любые ссылки с пометкой «hubspot» в их URL, я могу использовать [href = »hubspot»].

Вы также можете использовать определенное пространство имен, чтобы ограничить селектор атрибутов элементами только в этом пространстве имен.

Синтаксис селектора атрибутов

Синтаксис селектора атрибутов включает следующее:

• [attr]
• [attr = value]
• [attr

Используемый синтаксис зависит от того, хотите ли вы выбрать элементы, для которых установлено определенное значение атрибута.

Пример селектора атрибутов

Скажем, я хочу сделать все ссылки с пометкой «hubspot» в URL оранжевым цветом. тогда я могу использовать [href = “hubspot”].

Вот мой CSS с селектором атрибутов, определяющим все ссылки, которые включают «hubspot».

Селектор псевдокласса

Селектор псевдокласса применяет CSS к выбранному элементу или элементам только тогда, когда они находятся в особом состоянии. Например,: hover стилизует элемент только тогда, когда пользователь наводит на него курсор. Другими распространенными примерами являются: активный,: посещенный и: недействительный.

Синтаксис селектора псевдокласса

• селектор: псевдокласс

Пример селектора псевдокласса

Допустим, я хочу изменить цвет ссылок, которые пользователь уже посетил, на зеленый. Я хочу, чтобы ссылки, которые пользователь не посещал, оставались синими. И я хочу, чтобы ссылки менялись на привлекательный цвет фуксии, когда пользователь наводит на них курсор.

Вот мой CSS с тремя разными псевдоклассами для ссылок, которые не были посещены, уже посещены и над которыми наведен курсор.

Теперь, когда мы понимаем основные типы селекторов CSS, давайте рассмотрим, как вы можете комбинировать их на своем веб-сайте.

Как сгруппировать несколько селекторов в CSS?

Допустим, у вас есть несколько элементов, к которым вы хотите применить один и тот же CSS, например, h2 и класс .spacious, которые вы хотите сделать зеленым. Вы можете написать код как два отдельных правила, как показано ниже.

Или вы можете объединить селекторы в список селекторов. Чтобы создать список селекторов, вам просто нужно перечислить несколько селекторов и разделить их запятыми перед скобкой, содержащей свойства стиля. Поскольку пробелы допустимы до и после запятой, я добавлю пробел после каждой запятой, чтобы код было легче читать.

Таким образом, синтаксис будет следующим: элемент, элемент, элемент <свойства стиля>. Вот пример выше:

Вы также можете разместить селекторы в отдельной строке, если это облегчит чтение кода. В этом случае синтаксис будет выглядеть так:

Подобное объединение селекторов CSS может помочь уменьшить размер таблиц стилей и ускорить загрузку веб-страницы.

Настройка с помощью селекторов CSS

Селекторы CSS позволяют точно контролировать процесс настройки и код при создании сайта с нуля. Хотя может потребоваться обучение, вам следует потратить время на изучение и тестирование различных типов селекторов CSS. Это может позволить вам стилизовать ваш сайт в соответствии с вашим брендом, сохраняя при этом легкий код и ускоряя время загрузки.

Селекторы

Селектор указывает элемент или группу элементов, которым устанавливается стиль. Ко всем элементам на странице, которые совпадают с селекторм, будет применён стиль, указанный для этого селектора. Селекторов достаточно много, одни используются постоянно, другие реже. В этой теме мы рассмотрим основные.

Селектор по тегу

Селектор по тегу определяет стиль всех элементов страницы, созданных определённым тегом. Например, для всех тегов <h1> или для всех тегов <p> . Для создания этого селектора указывается имя тега без скобок.

Если Вы всё сделали правильно то заголовок будет отображаться красным цветом и маленьким шрифтом. Вы можете добавить на страницу ещё тэги <h1> и увидите, что все они отображаются с тем же стилем.

Селектор по id

Любому тэгу можно установить атрибут id . Это идентификатор — уникальное имя элемента, по которому этот элемент можно найти для разных целей. В том числе для установки стиля. На одной странице может быть только один элемент с конкретным id . Если на странице есть несколько элементов с одинаковым значением id , то это ошибка. Для указания селектора по id ставится знак #, а затем без пробела значение id .

Укажем стиль этому элементу. Добавим внутрь тэга <style> такой код:

Абзац должен отображаться на странице зелёным цветом.

Селектор по классу

Любому тэгу можно установить атрибут class . Смысл этого атрибута примерно такй же, как у id . Но один и тот же класс может быть у любого количества элементов страницы. И всем этим элементам можно установить определённый стиль. Для указания селектора по классу ставится точка, затем без пробела значение атрибута class .

Для примера добавим на страницу список и зададим пунктам списка атрибут class :

Список должен отображаться синим цветом.

Один и тот же класс может быть у разных тегов. При этом, можно указать стиль не всем элементам класса, а только определённым тэгам. Для этого пишется сначала тэг, затем без пробела точка и класс. Такой селектор будет выглядеть так:

Определённый элемент может относиться одновременно к нескольким классам. Для этого в атрибуте class все классы перечисляются через пробел. Пример:

Этот элемент будет относиться к двум классам. При этом, к нему будут применены и свойства класса registration, и свойства класса inform.

Универсальный селектор

Универсальный селектор устанавливает стиль для всех элементов. Он создаётся с помощью знака *

Для примера изменим шрифт всем элементам страницы. Добавим в стиль следующий код:

Составной селектор

Часто нужно применять стиль к элементу, только если он находится внутри другого элемента. Для этого существует составной селектор, который состоит из нескольких селекторов. Селекторы перечисляются через пробел. Сначала указывается внешний элемент, а затем вложенный элемент, к которому применяется стиль.

Для примера установим стиль тэгам <span> , которые находятся внутри тэгов <p> . Добавим на страницу абзац с тэгом <span> , а также отдельный тэг <span> , к которому стиль не должен применяться.

Добавим в стиль такой код:

Первый тэг <span> изменил цвет, а второй остался неизменным, потому что он не находится внутри тэга <p> .

Составной селектор может состоять не только из тэгов, но и из любых других селекторов. Для примера установим стиль тэгу <span> , который находится внутри элемента определённого класса. Добавим на страницу блок и зададим ему класс:

Добавим в стиль такие строки:

Установка стиля нескольким селекторам

Если нескольким селекторам нужно установить один и тот же стиль, то не обязательно указывать его каждому селектору по-отдельности. Можно перечислить селекторы через запятую и один раз указать им стиль. Это может быть применено к любым селекторам.

Один и тот же селектор может быть указан в стиле несколько раз. Это используется, например, в тех случаях, когда селекторы перечислены через запятую и им заданы определённые свойства. А затем, каждому селектору отдельно установлены остальные свойства.

Приоритет селекторов

Иногда определённому элементу страницы разные селекторы устанавливают стили, противоречащие друг другу. То есть в этих селекторах есть одно и то же свойство, но с разными значениями. В этом случае применяется стиль того селектора, у которого выше приоритет. При этом, у второго селектора не применяется только то свойство, которое противоречит приоритетному селектору. Остальные свойства будут работать.

Приоритет селектора определяется специфичностью. Специфичность — это число, которое складывается по определённым правилам. Каждый тип простых селекторов имеет свою специфичность.

Селектор по тэгу имеет специфичность 1

Селектор по классу и псевдоклассу имеет специфичность 10

Селектор по id имеет специфичность 100

Например, если есть селекторы div и .inf, то будет использован стиль селектора .inf, потому что у него больше специфичность.

У сложных и составных селекторов специфичность складывается из специфичности простых селекторов, которые входят в их состав. Например: