CSS селекторы – виды и синтаксис
CSS селектор по классу Х. Разница между id и классом в том, что один и тот же класс может быть у нескольких элементов на странице, а id всегда уникален. Классы стоит использовать для применения одного и того же стиля к нескольким элементам.
CSS селектор по id. Знак решетки перед CSS селектором Х выбирает элемент у которого >
CSS селектор всех элементов. Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать, потому что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.
Символ * также можно использовать чтобы выделить все дочерние элементы:
В этом примере выделяются все дочерние элементы (потомки) элемента с #header. Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.
CSS селектор типа. Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента.
CSS селектор потомков или CSS селектор дочерних элементов используется чаще всего. Его используют если необходимо выбрать элементы определенного типа из множества дочерних элементов. Например, нужно выделить все ссылки, которые находятся в элементе li.
Смежный селектор элементов выбирает только элемент типа Y, который идет сразу после элемента Х. В этом случае каждый параграф следующий сразу после каждого элемента div будет получать специальный тип и размер шрифта.
CSS селектор потомков. Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:
CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с . Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.
Селектор сестринских (саблинговых) элементов менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.
X:visited and X:link
Псевдо-класс :link используется для выбора всех ссылок, на которые еще не кликнули. Если же нужно применить определенный стиль к уже посещенным ссылкам, то для этого используется псевдо-класс :visited.
CSS селектор по атрибуту. В этом примере выбираются только те ссылки, у которых есть атрибут title.
Все ссылки, атрибут href у которых равен https://www.google.com/ станут желтыми. Остальные ссылки выбраны не будут.
X [href*=»google»]
Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www.google.com/ и www.google.com и google.com. Ко всем выбранным ссылкам будет применен золотой цвет.
На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат “^” – это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.
Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg.
Здесь мы применяем CSS селектор по пользовательскому атрибуту. Добавляем наш собственный атрибут data-filetype в каждую ссылку:
Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением.
Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение:
С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:
/* Выбрать элемент, атрибут data-info которого содержит значение external */ a[data-info~=»external»] < color: green; >/* Выбрать элемент, атрибут data-info которого содержит значение image */ a[data-info~=»image»]
Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии.
Псевдоклассы :before и :after очень полезные – они создают контент до и после выбранного элемента.
Применяет к элементу определенный стиль, когда на него наводится курсор мыши.
X:not(selector)
Псевдокласс not (отрицания) бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет .
По такому же принципу можно выбрать все элементы кроме p:
X::pseudoElement
Псевдоэлементы могут использоваться для применения стилей к фрагментам элементов – к примеру к первой строке абзаца или первой букве в слове. Применимо только к блочным элементам.
Выбор первой буквы параграфа:
X:first-child
Псевдокласс first-child выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка.
Псевдокласс last-child выбирает последнего потомка родительского элемента.
Псевдокласс only-child позволяет выбрать те элементы, которые являются единственными потомками для своих родителей.
Выбирает дочерний элемент по номеру, указанному в параметре. Селектор nth-child принимает целое число в качестве параметра, однако отсчет ведется c 1, т.е. если нужно выбрать второй пункт списка, используйте li:nth-child(2).
X:nth-last-child(n)
Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109), можно использовать селектор последних потомков nth-last-child. Этот метод такой же как и предыдущий, но отсчет ведется с конца.
X:nth-of-type(n)
Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type.
X:nth-last-of-type(n)
Псевдокласс nth-last-of-type(n) предназначен для выбора n-ого элемента определенного типа с конца.
X:only-of-type
Псевдокласс only-of-type выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.
X:first-of-type
ul:first-of-type > li:nth-child(3)
Псевдокласс first-of-type выбирает первый элемент заданного типа.
Комбинаторы
Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.
| Необходимые условия: | Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
|---|---|
| Цель: | Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS. |
Комбинатор потомка
Селектор потомка — обычно представляется символом пробела (» «) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются селекторами потомка.