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