10 CSS селекторов, без которых не следует верстать
Каждый раз при использовании CSS мы применяем селекторы. Но, несмотря на это, селекторы CSS –один из самых пренебрегаемых разделов спецификации.
Мы говорим о больших преобразованиях в CSS3, но часто забываем об основах. Правильное применение селекторов упрощает и украшает ежедневное кодирование. Сегодня я хочу рассказать о 10 селекторах, которые часто ускользают из памяти, но являются эффективными и очень полезными.
* (звездочка)
Может быть, проще всего вспомнить о селекторе *, но он часто недоиспользуется. Он назначает всем элементам на странице стили и великолепно подходит для создания сброса, а также создания стилей страницы по умолчанию, таких как нужные вам шрифты и размер.
* {
margin: 0;
padding: 0;
font-family: helvetica, arial, sans-serif;
font-size: 16px;
}
A + B
Этот селектор называется смежным и выбирает тот элемент, который следует сразу за первым. Если вам нужно выбрать первый div после верхнего колонтитула, то вы напишете:
header + div {
margin-top: 50px;
}
A > B
Этот селектор выберет только прямые дочерние элементы, в отличие от селектора A B, который выберет дочерние элементы A любого уровня. Этот селектор рекомендуется при работе с дочерними элементами первого уровня родительского элемента. Например, если вам нужно выбрать элементы списка первого уровня в неупорядоченном списке, это выглядит так:
<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>
Вы примените этот селектор потому, что обычный селектор A B также выберет элементы списка внутри вложенного неупорядоченного списка
ul > li {
background: black;
color: white;
}
A[href*=”example”]
Это – действительно классный селектор, когда нужно немного по-иному назначить стили отдельной ссылке; то, что находится в кавычках, будет сопоставлено с href ссылки. Например, для назначения стилей всем ссылкам на facebook синего цвета вы примените:
[href*="facebook"] {
color: blue;
}
Есть еще версия без *, которая сопоставляет точный url, который можно использовать для точных ссылок.
A:not(B)
Этот селектор особенно хорош из-за своего отрицательного выражения, позволяющего вам выбрать любую группу элементов, не совпадающих с тем, что вы размещаете в B. Если хотите выбрать каждый div за исключением нижнего колонтитула, вам нужно всего лишь:
div:not(.footer) {
margin-bottom: 40px;
}
A:first-child / A:last-child
Селекторы first-child и last-child позволяют выбирать первый и последний дочерние элементы родительского элемента. Они очень помогают, когда дело доходит до элементов списка и удаления правого поля и рамок. Для удаления рамки в первом элементе списка и поля в последнем вам понадобится:
ul li:first-child {
border: none;
}
ul li:last-child {
margin-right: 0px;
}
A:nth-child(n)
Селектор nth-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, но вместо того, чтобы начать отсчет с первого элемента списка, он начинает считать с последнего, поэтому если вы примените его с числом два, он выберет тот элемент списка, который идет перед последним, и будет применяться как селектор nth-child:
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. Он – отличное дополнение для пользователей, но иногда он нем забывают и, судя по моему опыту, он очень удобен при поиске в google.
a:visited {
color: blue;
}
Заключительная мысль
По моему опыту применение этих видов селекторов при вертске может сэкономить много времени, а также избежать необходимости в переполнении разметки множеством ID. И это – только начало, существует еще множество действительно удобных селекторов, о которых иногда забывают.
Автор: Sara Vieira
