10 CSS селекторов, без которых не следует верстать

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 синего цвета вы примените:

a[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

Источник: http://www.webdesignerdepot.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (4)

  1. Эльдар

    Спасибо ! Все доступно и ясно !!!

  2. Иван

    Статья интересная, но хотелось бы посмотреть примеры использования этих селекторов.

  3. Aleksandrsk79

    очень не хватает для таких статей демонстрации примера… (демо-версии)

    • Андрей Кудлай

      Да, согласен. Это переводная статья, к сожалению, в них частенько демо отсутствует.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree