Каждый раз, когда мы используем 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
