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; } 

Заключение

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