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

Каждый раз, когда мы используем CSS, мы используем селекторы. Несмотря на это, селекторы являются одной из наиболее пренебрегаемой частью спецификации.

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

*

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

* {
   margin: 0;
   padding: 0;
   font-family: helvetica, arial, sans-serif;
   font-size: 16px;
}

A + B

Этот селектор называется соседним, он выбирает тэг B, следующий сразу же после тэга A. (Элементы должны следовать непосредственно друг за другом). Если вы хотите выбрать первый контейнер после заголовка, пишите:

header + div {
   margin-top: 50px;
} 

A > B

Этот селектор выберет только дочерний элемент, в отличие от A B, выбирающего всех потомков. Этот селектор рекомендуется, если вы работаете с прямым потомком родительского элемента. К примеру, если вы хотите выбрать элементы верхнего уровня в неупорядоченном списке, это будет выглядеть примерно так:

<ul>
	<li>List Item With ul
		<ul>
			<li>Sub list item</li>
			<li>Sub list item</li>
			<li>Sub list item</li>
		</ul>
	</li>
	<li>List Item</li>
	<li>List Item</li>
</ul>

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

ul > li {
   background: black;
   color: white;
}

A[href*=«example»]

Этот селектор хорош, если вам нужно применить особый стиль к ссылкам, в атрибуте href которых есть значение, указанное в кавычках. Например, чтобы все ссылки, ведущие на Facebook, были синего цвета, используем:

a[href*="facebook"] {
   color: blue;
}

Также есть версия без "*", позволяющая использовать точную ссылку.

A:not(B)

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

div:not(.footer) {
   margin-bottom: 40px;
}

A:first-child / A:last-child

Эти селекторы помогают выбрать первого и последнего потомка, соответственно, родительского элемента. Они могут отлично убрать правые отступы или границы, когда дело доходит до элементов списка. Чтобы убрать границу у первого пункта меню и отступы у последнего, необходимо:

ul li:first-child {  
   border: none;  
}     
ul li:last-child {  
   margin-right: 0px;
}

A:nth-child(n)

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

ul li:nth-child(3) {
   background: #ccc;
}

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

A:nth-last-child(n)

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

ul li:nth-last-child(2) {
   background: #ccc;
}

A:nth-of-type(n)

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

div p:nth-of-type(3) {
   font-style: italic;
}

A:visited

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

a:visited {
   color: blue;
}

Заключение

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

Автор: ierogliph

Источник ^[4]