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

Каждый раз, когда мы работаем с CSS, мы используем селекторы. Однако, несмотря на это, селекторы являются одной из наиболее пренебреженной частью спецификации.
Мы говорим о больших преобразованиях в CSS3, но слишком часто забываем об основах. Правильное использование селекторов, делает наше повседневное кодирования более простым и изящным. В этой статье, мы расскажем вам о 10 селекторах, которые часто нами упускаются, но являются очень эффективными и полезными.

*

* селектор, который хорошо запоминается, но не достаточно используется. Он отвечает за стилизацию всех элементов на странице, прекрасен для создания сбросов (reset), а также для создания некоторых элементов по умолчанию на странице (например, родительских элементов и размера шрифта).

A+B

Этот селектор называется ” смежным селектором”, что он делает, это выбирает элемент, который находится сразу же после первого элемента. Если вы хотите, выбрать первый div после хэдера, тогда следует ввести:

A > B

Этот селектор выберет только прямых “детей”(children) в отличие от AB, который выберет любой уровень детей А. Этот селектор рекомендуется при работаете с первым уровнем родительского элемента. Например, если вы хотите выбрать список элементов первого уровня из неупорядоченного списка,  то это будет выглядеть следующим образом:

Вы бы использовали этот селектор, потому что обычный AB селектор также выбирает элементы списка внутри вложенного неупорядоченного списка

A[href*=”пример”]

Это действительно хороший селектор, если вам нужно “по-другому” стилизовать определенную ссылку. Все, что в кавычках, будет сравниваться с href ссылками. Например, для стилизации всех ссылок на VKontakte синим цветом можно использовать:

Существует также версия без *, которая точно соответствует URL, который можно использовать для точной ссылки.

A:not(B)

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

A:first-child  / A:last-child

First-child и last-child позволяют нам выбрать первого и последнего “ребенка” родительского элемента. Это может стать большой помощью, когда дело доходит до элементов списка и удаления margin-right (правое поле) или borders (границ). Чтобы удалить границу в первом пункте списка и поле в последнем элементе списка, вам нужно:

A:nth-child(n)

nth-child это простой способ для выбора любого “child” элемента по его упорядоченности. Если, например, вам нужен третий пункт списка в неупорядоченном списке, то это будет выглядеть так:

Мы можем использовать  nth-child для выбора каждого множителя цифры с помощью переменной n, например, если мы ставим 3n, то тогда она будет выбирать элемент списка с цифрой 3, 6, 9, 12 и так далее.

A:nth-last-child(n)

nth-last-child работает так, как и  nth-child, но вместо того чтобы считать с первого элемента списка, он начинает отсчет с последнего. Так что если вы используете его с номером 2, то он выберет элемент списка, который идет перед последним:

A:nth-of-type(n)

Этот селектор делает именно то, что вы думаете. Он видит, какой тип элемента вы разместили на нем, и затем выбирает соответственно.  Например, третий элемент на странице, соответствует тому, что вы набрали. Для выбора третьего параграфа в div можно использовать:

A:visited

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

Заключение

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