Что такое css селектор и какова его функция

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

HTML-страницы, к которым могут применяться стили CSS, могут содержать огромное количество элементов.

+ Текст (вполоть для каждой буквы, каждого абзаца и.т.д.)

+ Таблицы (каждая их строка, столбец или ячейка, и.т.д.)

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

css-gallery

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

В технологии CSS это можно сделать с помощью так называемых селекторов.

Селекторы ( от англ. select — выбирать) — это элементы каскадной таблицы стилей CSS, которые указывают на тот элемент на веб-странице, к которому должны будут применяться стили.

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

В CSS селекторы располагаются самой первой составляющей стиля.

Синтаксис здесь следующий:

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

По-сути, весь CSS-файл и состоит из таких конструкций, указания селекторов и стилей, которые к ним относятся.

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

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

Псевдо-элементы

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

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

Из предыдущего урока вы узнали, что такое селектор и как применять стили к элементам. Допустим, вам нужно сделать цвет заголовка и абзаца одного цвета – красным. Руководствуясь предыдущим уроком, вы бы написали как в "примере 1":

Но в CSS можно группировать селекторы. Теперь перепишем "пример 1".

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

Вы можете перечислить любое количество селекторов, например, как в "примере 3".

Добавить комментарий

Ваш адрес email не будет опубликован.