CSS селекторы, которые вы должны знать

CSS селекторы, которые вы должны знать

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

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

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

Селекторы

#X

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

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

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

CSS селекторы, которые вы должны знать

.X

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

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

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

CSS селекторы, которые вы должны знать

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

Комментарии

Adblock
detector