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

CSS селекторы

Каждый раз, когда мы работаем с 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;
}

Заключение

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

Высоких конверсий!

09-03-2016