- PVSM.RU - https://www.pvsm.ru -
Каждый раз, когда мы используем CSS, мы используем селекторы. Несмотря на это, селекторы являются одной из наиболее пренебрегаемой частью спецификации.
Мы говорим о больших изменениях в CSS, но часто забываем об основах. Правильное использование селекторов делает ежедневную верстку проще и элегантнее. Сегодня я расскажу о 10 селекторах, которые часто ускользают из памяти, но являются эффективными и очень полезными.
Селектор * легче всего запомнить, но этого часто недостаточно. Он применяет стиль ко всем элементам на странице, и это отлично подходит для создания сбросов и выбора каких-то свойств по-умолчанию, например, семейства или размера шрифта.
* {
margin: 0;
padding: 0;
font-family: helvetica, arial, sans-serif;
font-size: 16px;
}
Этот селектор называется соседним, он выбирает тэг B, следующий сразу же после тэга A. (Элементы должны следовать непосредственно друг за другом). Если вы хотите выбрать первый контейнер после заголовка, пишите:
header + div {
margin-top: 50px;
}
Этот селектор выберет только дочерний элемент, в отличие от 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;
}
Этот селектор хорош, если вам нужно применить особый стиль к ссылкам, в атрибуте href которых есть значение, указанное в кавычках. Например, чтобы все ссылки, ведущие на Facebook, были синего цвета, используем:
a[href*="facebook"] {
color: blue;
}
Также есть версия без "*", позволяющая использовать точную ссылку.
Этот селектор полезен, если нужно выбрать группу элементов, не соответствующих указанным в В. Если вы хотите выбрать все контейнеры кроме футера, используйте:
div:not(.footer) {
margin-bottom: 40px;
}
Эти селекторы помогают выбрать первого и последнего потомка, соответственно, родительского элемента. Они могут отлично убрать правые отступы или границы, когда дело доходит до элементов списка. Чтобы убрать границу у первого пункта меню и отступы у последнего, необходимо:
ul li:first-child {
border: none;
}
ul li:last-child {
margin-right: 0px;
}
Этот селектор — простой способ выбрать потомок элемента по его порядку. К примеру, если вы хотите выбрать третий пункт внутри неупорядоченного списка, нужно:
ul li:nth-child(3) {
background: #ccc;
}
Можно использовать nth-child для выбора каждого n-ого элемента. Если мы используем 3n, то будет выбирать 3-ий, 6-ой, 9-ый пункт меню и т.д.
Этот селектор работает как предыдущий, но начинает считать с последнего элемента, а не первого. Так что, если вы используете nth-last-child(2), стиль применится к предпоследнему элементу.
ul li:nth-last-child(2) {
background: #ccc;
}
Этот селектор делает именно то, о чем вы подумали; выбирает элемент по типу и номеру, который вы указали. Для выбора третьего параграфа в контейнере можно использовать:
div p:nth-of-type(3) {
font-style: italic;
}
Никогда не замечали, что когда вы что-то ищете в Google, ссылки, по которым вы переходили, меняют цвет? Так работает visited. Это прекрасная помощь пользователям, о которой частенько забывают, но, по моему опыту, это очень удобно.
a:visited {
color: blue;
}
По моему опыту, использование всех этих селекторов при разработке помогает спасти уйму времени, а также избежать создания множества идентификаторов при разметке. И это только часть селекторов, их намного больше, удобных, но забытых.
Автор: ierogliph
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/news/40785
Ссылки в тексте:
[1] твиттер: https://twitter.com/NikkitaFTW
[2] сайт: http://www.iamsaravieira.com/
[3] статьи: http://www.webdesignerdepot.com/author/Sara-Vieira
[4] Источник: http://habrahabr.ru/post/189884/
Нажмите здесь для печати.