Краткий курс о CSS селекторах

Всем привет! Тут я попытаюсь объяснить, какие есть селекторы в css. Эти знания позволят вам лучше таргетировать рекламу на своём сайте, размещая её в самых неожиданных местах!

Чтобы узнать, какие селекторы используются на вашем сайте, нажмите правой кнопкой мыши по нужному элементу и выберите пункт "Просмотреть код". Или воспользуйтесь комбинацией ctrl+shift+i, чтобы открыть консоль разработчика в браузере.

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

Селекторы

CSS3-селекторы – фундаментально полезная вещь.

Даже если вы почему-то не пользуетесь ими в 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 – только непосредственные потомки

Есть и два более редких:

• div ~ p – правые соседи: все p на том же уровне вложенности, которые идут после div.
• div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).

Использование символа решётки позволяет обратиться к уникальному идентификатору элемента id.

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

На скриншоте ниже обозначен id шапки сайта, чтобы обратиться к нему нужно написать #header

Синтаксис

.X

Символ точки позволяет обратиться к классу элемента - class

Отличие селектора class от id в том, что id должен быть уникальным и не может использоваться для выбора нескольких элементов на странице, а у class'а таких проблем нет.

На скриншоте ниже обозначен class контейнера хлебных крошек, чтобы обратиться к нему нужно написать .breadcrumbs

X

Что вы будете делать, если вам понадобится выбрать только элементы определённого типа? В этом случае вы не сможете использовать id или class, вам на помощь придёт селектор по типу элемента. Если вам нужны все обычные списки, просто используйте ul, а для нумерованного списка ol.

X Y

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

X > Y

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

Селектор #container > ul выберет только тот элемент ul, который является прямым потомком элемента div с id равным container. Он не выберет, например, элемент ul , являющийся потомком первого элемента li.

X + Y

Это соседний селектор. Он поможет нам выбрать только тот элемент, который следует сразу же за указанным элементом. Если нужно выбрать только первый параграф текста, следующий сразу за тэгом ul, то используйте селектор ul + p.

X ~ Y

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

X[title]

Это селектор атрибутов. Он выберет только те ссылки, у которых имеется указанный атрибут title.

X[href="foo"]

Селктор выберет тот элемент, у которого атрибут href равен foo.

X[href*="nettuts"]

Звёздочка означает, что значение должно быть частью указанного атрибута.

X[href^="http"]

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

X[href$=".jpg"]

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

X:not(selector)

Псевдокласс отрицания бывает очень полезен. Представьте, что вам нужно выбрать все тэги div, кроме одного с id равным container. Код выше сделает именно это.

X:nth-child(n)

Псевдокласс :nth-child решает проблему выбора конкретного элемента в стеке.

:nth-child принимает в качестве параметра число, но отсчёт ведётся не от нуля. Если вам нужен второй по счёту элемент, используйте li:nth-child(2).

Вы можете использовать этот псевдокласс для выбора нескольких элементов. Например, li:nth-child(4n) позволит нам выбрать каждый четвертый элемент списка.

X:nth-last-child(n)

Представьте, что у вас есть огромный список ul, и вам нужно выбрать только третий элемент с конца. Вместо того, чтобы писать li:nth-child(397), вы можете использовать псевдокласс :nth-last-child.

Этот метод работает аналогично :nth-child. Отличие в том, что отсчёт элементов ведётся с конца.

X:first-child

Этот псевдокласс позволит нам выбрать только первый дочерний элемент.

X:last-child

В отличие от :first-child, селектор :last-child выберет последний дочерний элемент.

Примеры

1. Задача от пользователя: Миш, есть ситуация, может подскажешь решение. Я вывожу блок рекламы перед списком, перед видео и после заголовка h2, или h3. Бывает так, что список, или видео попадают сразу перед заголовком. В итоге у меня висит реклама перед списком/видео, потом идет заголовок и сразу реклама после него, выходит много рекламы. Может есть какая-то хитрая конструкция селектора?
   Решение: h2:not( ul+h2 ):not( p:has( iframe )+h2 ), h3:not( ul+h3 ):not( p:has( iframe )+h3 )
2. Задача от пользователя: Помогите вывести блок после ссылки, в которой есть картинка
   Решение: a:has( img )
3. Задача от пользователя: Нужно вывести блок после первого и/или второго параграфа, которые следует за h2
   Решение: h2 + p и h2 + p + p
4. Задача от пользователя: Привет! Можно ли в плагине выводить рекламу, к примеру, после каждого h2, но кроме первого?
   Решение: h2:not( :first-of-type )
5. Задача от пользователя: А если 1 и 2й пропустить, то h2:not(:first-of-type)(:second-of-type) не будет работать?)
   Решение: нет, h2:not( :nth-of-type( 1 ) ):not( :nth-of-type( 2 ) ) так будет понятнее :)
6. Задача от пользователя: Подскажите пожалуйста, как вывести рекламный блок под вторым подзаголовком, причём любым, что будет вторым Н2, Н3, Н4
   Решение: h2, h3, h4, h5, h6