Каждый раз, когда мы работаем с CSS, мы используем селекторы. Однако, несмотря на это, селекторы являются одной из наиболее пренебреженной частью спецификации.
Мы говорим о больших преобразованиях в CSS3, но слишком часто забываем об основах. Правильное использование селекторов, делает наше повседневное кодирования более простым и изящным. В этой статье, мы расскажем вам о 10 селекторах, которые часто нами упускаются, но являются очень эффективными и полезными.
*
* селектор, который хорошо запоминается, но не достаточно используется. Он отвечает за стилизацию всех элементов на странице, прекрасен для создания сбросов (reset), а также для создания некоторых элементов по умолчанию на странице (например, родительских элементов и размера шрифта).
* { margin: 0; padding: 0; font-family: helvetica, arial, sans-serif; font-size: 16px; }
A+B
Этот селектор называется ” смежным селектором”, что он делает, это выбирает элемент, который находится сразу же после первого элемента. Если вы хотите, выбрать первый div после хэдера, тогда следует ввести:
header + div { margin-top: 50px; }
A > B
Этот селектор выберет только прямых “детей”(children) в отличие от AB, который выберет любой уровень детей А. Этот селектор рекомендуется при работаете с первым уровнем родительского элемента. Например, если вы хотите выбрать список элементов первого уровня из неупорядоченного списка, то это будет выглядеть следующим образом:
<ul> <li>Элемент списка с ul <ul> <li>Суб-элемент списка</li> <li>Суб-элемент списка</li> <li>Суб-элемент списка</li> </ul> </li> <li>Элемент списка</li> <li>Элемент списка</li> </ul>
Вы бы использовали этот селектор, потому что обычный AB селектор также выбирает элементы списка внутри вложенного неупорядоченного списка
ul > li { background: black; color: white; }
A[href*=”пример”]
Это действительно хороший селектор, если вам нужно “по-другому” стилизовать определенную ссылку. Все, что в кавычках, будет сравниваться с href ссылками. Например, для стилизации всех ссылок на VKontakte синим цветом можно использовать:
a[href*="vk"] { color: blue; }
Существует также версия без *, которая точно соответствует URL, который можно использовать для точной ссылки.
A:not(B)
Этот селектор особенно полезно из-за его отрицательного условия, которое позволяет выбрать любую группу элементов, которые не соответствуют тому, что вы размещаете в В. Если вы хотите выбрать каждый div, кроме футера, тогда просто нужно сделать:
div:not(.footer) { margin-bottom: 40px; }
A:first-child / A:last-child
First-child и last-child позволяют нам выбрать первого и последнего “ребенка” родительского элемента. Это может стать большой помощью, когда дело доходит до элементов списка и удаления margin-right (правое поле) или borders (границ). Чтобы удалить границу в первом пункте списка и поле в последнем элементе списка, вам нужно:
ul li:first-child { border: none; } ul li:last-child { margin-right: 0px; }
A:nth-child(n)
nth-child это простой способ для выбора любого “child” элемента по его упорядоченности. Если, например, вам нужен третий пункт списка в неупорядоченном списке, то это будет выглядеть так:
ul li:nth-child(3) { background: #ccc; }
Мы можем использовать nth-child для выбора каждого множителя цифры с помощью переменной n, например, если мы ставим 3n, то тогда она будет выбирать элемент списка с цифрой 3, 6, 9, 12 и так далее.
A:nth-last-child(n)
nth-last-child работает так, как и nth-child, но вместо того чтобы считать с первого элемента списка, он начинает отсчет с последнего. Так что если вы используете его с номером 2, то он выберет элемент списка, который идет перед последним:
ul li:nth-last-child(2) { background: #ccc; }
A:nth-of-type(n)
Этот селектор делает именно то, что вы думаете. Он видит, какой тип элемента вы разместили на нем, и затем выбирает соответственно. Например, третий элемент на странице, соответствует тому, что вы набрали. Для выбора третьего параграфа в div можно использовать:
div p:nth-of-type(3) { font-style: italic; }
A:visited
Никогда не замечали, что когда вы ищете что-то на Google, то те страницы, которые вы уже посещали, будут выделенны другим цветом? Это именно то, что делает visited. Это является прекрасным дополнением для пользователей.
a:visited { color: blue; }
Заключение
Использование этих видов селекторов при кодировании может сэкономить вам много времени, а также поможет избежать необходимости в идентификаторах, которые загромождают разметку.
Высоких конверсий!