Какие бывают селекторы в css

Селекторы CSS

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

Необходимые знания: Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS).
Цель: Узнать, как работают CSS-селекторы.

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

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

Some code with the h1 highlighted.

Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special .

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

Несколько селекторов

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special ; я могу написать их так:

А могу написать короче — просто отделив селекторы запятыми:

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

Но если мы объединим селекторы, правило не применится ни к h1 , ни к классу: оно считается недействительным.

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

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

Селекторы тегов, классов и идентификаторов

К этой группе относятся селекторы HTML-элементов, таких как <h1> .

К группе относятся и селекторы классов:

или селекторы идентификаторов (ID):

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

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

или основываясь на значении атрибута:

Псевдоклассы, псевдоэлементы

К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover , например, применяет правило, только если на элемент наведён курсор мыши

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.

Комбинаторы

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов ( > ):

Продолжение

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

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

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

Селекторы. Виды селекторов.

Селекторы &#8212; это часть правила CSS, которые позволяют определить к какому элементу веб страницы следует применять правила. Они могут быть: простыми, сложными, составными (список селекторов).

К простым селекторам относятся:

  • классы;
  • селектор тега;
  • идентификаторы;
  • универсальный селектор.
Простые селекторы

Классы задаются элементам с помощью атрибута >

Например:

<div Блок с основным контентом </div>

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

Описание классов CSS:

Все классы на CSS записываются в следующем виде:

.content <

width: 50%;

color: green;

>

Теперь после того как мы присвоим элементу класс со значением контент, он будет иметь ширину 50% и цвет текста зеленый.

<div 50% и цвет текста зеленый</div>

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

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

Например:

p <

color: green;

>

В данном случае ко всем тегам <P> будет применен стиль написанный выше. При таком написание правил не нужно добавлять дополнительные атрибуты. Правила применяются ко всем тегам имеющим заданное название.

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

Идентификаторы в отличии от классов могут применяться только к одному объекту веб страницы. Присутствие на странице двух объектов с одним идентификатором не допустимо. Это вызовет ошибку компиляции кода. Присваивается идентификатор тегу с помощью атрибута id.

Вид идентификатора в HTML

<p такого идентификатора быть не должно</p>

В коде CSS идентификаторы описываются следующим образом:

#content_plus <

color: red;

>

Идентификаторы используются довольно редко для описания стилей. В основном атрибут id для тега предназначен для работы со скриптами. Особенно активно используется в JavaScript.

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

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

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

<div блок контента сайта </div>

<p блок подвала сайта </p>

Код CSS выглядит следующим образом:

.content <

color: red;

>

.foot <

color: green;

>

.content, .foot <

width: 100%;

>

В данном случае у нас есть два разных элемента с разными классами. Каждый класс содержит определенный стиль оформления. Это цвет текста в основном блоке цвет красный, в подвале зеленый. появилась необходимость сделать эти элементы шириной 100%. Можно дописать еще по строчке к каждому классу, но как уже сказали, это увеличит объем работы и вес файла CSS. В нашем случае код очень маленький поэтому эта разница не особо заметна. Но представьте что у вас есть 1000 элементов, сотни классов и идентификаторов, 2000 строк кода. И вам потребовалось некоторые элементы изменить, например убрать или добавить отступ. Таких элементов может быть 20, 30 и больше. И тогда вам придется добавить не 2 строки а 20 или 30 строк. Кроме этого вам нужно найти все места где описаны нужные селекторы а это занимает время. В этом случае составные селекторы очень облегчают задачу верстальщику и сокращают время загрузки страницы.

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

div.content <

margin-top: 5 px;

>

Данный стиль оформления будет применен к тегам div с классом content.

<div > стиль будет применен </div>

<p Стиль применен не будет</p>

Сложные селекторы

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

Например:

div p <

color: green;

>

Данный код CSS будет применен ко всем тегам <P> которые находятся внутри тега <DIV>

<div> <p> Стиль будет применен </p></div>

<p> <div> Стиль применен не будет </div> </p>

Это селектор вложенности. Вложенность может быть применена не только к селекторам тегов. Так же она работает и с классами, идентификаторами и тп.

Другой пример:

div.content p.blok <

width: 30 px;

>

В данном примере стиль будет применен для тега <p> которому присвоен класс blok, который в свою очередь находится в теге <div> которому присвоен класс content.

<div <p будет применен</p></div>

<div <p не будет применен</p></div>

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

Например:

div>p <

color: yellow;

>

Данный стиль будет применяться к тегам <p> которые находятся только в теге <div>.

<div> <p> Стиль будет применент</p> </div>

<div> <span> <p> Стиль не будет применен так как p &#8212; это дочерний элемент тега span </p></span></div>

И последние сложные селекторы это последовательные. Они применяют стили к элементам стоящим после каких либо других.

Например:

div+p <

width: 30px;

>

Стиль будет применен к тегу <p> идущему после тега <div>

<div> контент </div> <p>Стиль будет применен</p>

<div> контент </div><span>Информация</span> <p>Стиль не будет применен</p>

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

30 CSS селекторов &#8211; виды и синтаксис селекторов

Что такое селектор в css &#8211; это описание того элемента или группы элементов, которое показывает браузеру какой элемент выбрать для применения к нему стиля. Давайте рассмотрим основные CSS селекторы.

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

    Какими браузерами поддерживается:

CSS селектор по id. Знак решетки перед CSS селектором Х выбирает элемент у которого Навешивая стили по id всегда стоит помнить, что он должен быть уникальным &#8211; только один такой id должен быть на странице. Поэтому лучше использовать селекторы по классам, комбинациям классов или названиям тэгов. Тем не менее, селекторы по id отлично применяются в автоматизированном тестировании, т.к. позволяют сразу взаимодействовать именно с нужным элементом и иметь уверенность что он только один такой на странице.

    Какими браузерами поддерживается:

CSS селектор всех элементов. Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов ( margin и padding ) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.

Символ * также можно использовать чтобы выделить все дочерние элементы:

В этом примере выделяются все дочерние элементы (потомки) элемента с #header . Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.

    Какими браузерами поддерживается:

CSS селектор типа. Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента. К примеру, чтобы выбрать все упорядоченные списки на странице, используйте ol <. >как это показано выше.

    Какими браузерами поддерживается:

5) Х Y

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

    Какими браузерами поддерживается:

6) Х + Y

Смежный селектор элементов выбирает только элемент типа Y, который идет сразу после элемента Х. В этом случае каждый параграф следующий сразу после каждого элемента div будет получать специальный тип и размер шрифта.

    Какими браузерами поддерживается:

7) Х > Y

CSS селектор потомков. Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:

CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container" . Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.

    Какими браузерами поддерживается:

Селектор сестринских (саблинговых) элементов менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.

    Какими браузерами поддерживается:

9) X:visited and X:link

Псевдо-класс :link используется для выбора всех ссылок, на которые еще не кликнули. Если же нужно применить определенный стиль к уже посещенным ссылкам, то для этого используется псевдо-класс :visited.

    Какими браузерами поддерживается:

10) X[title]

CSS селектор по атрибуту. В этом примере выбираются только те ссылки, у которых есть атрибут title.

    Какими браузерами поддерживается:

11) X [href=“foo”]

Все ссылки, атрибут href у которых равен https://www.stijit.com/ станут желтыми. Остальные ссылки выбраны не будут.

    Какими браузерами поддерживается:

12) X [href*=“stijit”]

Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www.stijit.com/ и www.stijit.com и stijit.com. Ко всем выбранным ссылкам будет применен золотой цвет.

    Какими браузерами поддерживается:

13) X[href^=“http”]

На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат &#8220;^&#8221; &#8211; это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.

    Какими браузерами поддерживается:

14) X[href$=“.jpg”]

Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg.

    Какими браузерами поддерживается:

15) X[data-*=“foo”]

Здесь мы применяем CSS селектор по пользовательскому атрибуту. Добавляем наш собственный атрибут data-filetype в каждую ссылку:

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

    Какими браузерами поддерживается:

16) X[foo

) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение.

С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:

    Какими браузерами поддерживается:

17) X:checked

Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии.

    Какими браузерами поддерживается:

18) X:after

Псевдоклассы :before и :after очень полезные &#8211; они создают контент до и после выбранного элемента.

Здесь при помощи псевдо-класса :after после блока с классом .clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden .

    Какими браузерами поддерживается:

19) X:hover

Применяет к элементу определенный стиль, когда на него наводится курсор мыши. Старые версии Internet Explorer применяют :hover только к ссылкам.

    Какими браузерами поддерживается:

20) X:not(selector)

Псевдокласс not (отрицания) бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content" .

По такому же принципу можно выбрать все элементы кроме p:

    Какими браузерами поддерживается:

21) X::pseudoElement

Псевдоэлементы могут использоваться для применения стилей к фрагментам элементов &#8211; к примеру к первой строке абзаца или первой букве в слове. Применимо только к блочным элементам.

Выбор первой буквы параграфа:

Выбор первой строки в параграфе:

    Какими браузерами поддерживается:

22) X:first-child

Псевдокласс first-child выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка. Этот псевдокласс был еще начиная с CSS 1.

    Какими браузерами поддерживается:

23) X:last-child

Псевдокласс last-child выбирает последнего потомка родительского элемента. Он появился только начиная с CSS 3.

    Какими браузерами поддерживается:

24) X:only-child

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

    Какими браузерами поддерживается:

25) X:nth-child(n)

Выбирает дочерний элемент по номеру, указанному в параметре. Селектор nth-child принимает целое число в качестве параметра, однако отсчет ведется c 1, т.е. если нужно выбрать второй пункт списка, используйте li:nth-child(2) . Все псевдоклассы с использованием nth-child появились только начиная с CSS 3.

    Какими браузерами поддерживается:

26) X:nth-last-child(n)

Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109) , можно использовать селектор последних потомков nth-last-child. Этот метод такой же как и предыдущий, но отсчет ведется с конца.

    Какими браузерами поддерживается:

27) X:nth-of-type(n)

Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type.

    Какими браузерами поддерживается:

28) X:nth-last-of-type(n)

Псевдокласс nth-last-of-type(n) предназначен для выбора n-ого элемента определенного типа с конца.

    Какими браузерами поддерживается:

29) X:only-of-type

Псевдокласс only-of-type выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.

    Какими браузерами поддерживается:

30) X:first-of-type

Псевдокласс first-of-type выбирает первый элемент заданного типа.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *