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

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

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

» » Сообщение:

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

Aвтор писал(а):От автора: Каждый раз при использовании 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 любого уровня. Этот селектор рекомендуется при работе с дочерними элементами первого уровня родительского элемента. Например, если вам нужно выбрать элементы списка первого уровня в неупорядоченном списке, это выглядит так:

php Код: Выделить всё Развернуть
<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/

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