Все селекторы css - Liber.pro - личный сайт Алексея Либера

В статье я расскажу о некоторых важных CSS селекторах. Поскольку каждый web-разработчик должен быть еще и хорошим верстальщиком, то эта информация не будет лишней для тех специалистов, которые в верстке еще новички.

1. *

* { margin: 0; padding: 0; border: 0;}

Довольно известный селектор. Выделяет все элементы на странице. Его удобно использовать, но затратно с точки зрения производительности - грузит браузер. Еще его можно использовать для выделения дочерних элементов:

#parent * { border: 3px solid white; }

В этом случае будут выделены дочерние элементы #parent.

IE6 +
Firefox
Chrome
Safari
Opera

2. X:link, X:visited

a:link { color: blue; }
a:visited { color: orange; }

link и visited это псевдо-классы. link ссылки еще не посещенные, а visited наоборот.

IE7 +
Firefox
Chrome
Safari
Opera

3. X + Y

div + span { color: green; }

Выделяет только элемент Y следующий сразу за X.

<div>Hello</div>
<span>world!</span>
<span>I</span>
<span>web-developer</span>

В данном случае содержимое первого будет зеленого цвета.

IE7 +
Firefox
Chrome
Safari
Opera

4. X > Y

div#block > ul { border: 5px solid white; }

В данном случае будут выбраны только ul, у которых div#block будет непосредственным родителем.

IE7 +
Firefox
Chrome
Safari
Opera

5. X ~ Y

div + span { color: green; }

Этот селектор похож на X + Y, но более жадный.

<div>Hello</div>
<span>world!</span>
<span>I</span>
<span>web-developer</span>

В данном случае содержимое всех тегов будет зеленого цвета.

IE7 +
Firefox
Chrome
Safari
Opera

6. X[title]

a[title] { color: gray; }

В CSS можно также использовать атрибуты. В данном случае будут выделены все ссылки, которые имеют атрибут title.

IE7 +
Firefox
Chrome
Safari
Opera

7. X[href="Yoo"]

a[href="http://true-look.com"] { color: red; }

Все ссылки, которые ссылаются на http://true-look.com будут красного цвета. Правило хорошее, но не гибкое т.к. ссылка может вести на http://true-look.com/login/register/ и уже к ней это правило применяться не будет.

IE7 +
Firefox
Chrome
Safari
Opera

8. X[href*="aabbbccc"]

a[href*="true-look.com"] { color: red; }

Этот селектор выделит все ссылки у которых атрибут href содержит true-look.com. Но будьте внимательны потому как href может выглядеть так http://pld.name?redirect=true-look.com и такая ссылка тоже будет выделена.

IE7 +
Firefox
Chrome
Safari
Opera

9. X[href^="http"]

a[href^="http"] {
   background: url(images/icons/icon.png) no-repeat;
   padding-left: 5px;
}

Будут выделены все ссылки у которых содержимое атрибута href начинается на http.

IE7 +
Firefox
Chrome
Safari
Opera

10. X[href$=".ico"]

a[href$=".ico"] { color: green; }

Будут выделены все ссылки у которых содержимое атрибута href заканчивается на .ico.

IE7 +
Firefox
Chrome
Safari
Opera

11. X[data-*="doc"]

К примеру у нас есть ссылки с пользовательским атрибутом

<a href="public/doc/license.jpg" data-filetype="doc"> Ссылка на документ </a>

вот таким селектором мы их сможем выделить

a[data-filetype="doc"]{ color: blue; }

IE7 +
Firefox
Chrome
Safari
Opera

12. X[Yoo~="atr"]

Вот это очень интересный селектор. К примеру нам нужно выделить внешние ссылки, которые ссылаются на изображения. Для этого у нас есть ссылки в таком виде

<a href="http://true-look.com/images/pic.jpg" data-info="external image"> Ссылка на картинку </a>

мы видим, что у ссылки есть пользовательский атрибут с двумя параметрами external и image. Теперь используем наш селектор.

/ * Выбираем ссылки с атрибутом data-info, содержащий значение "external" * /
a[data-info~="external"] { color: yellow; }
/ * И которые содержат значения "image" * /
a[data-info~="image"] { border: 5px solid green; }

Вот задача и решена. И это все только используя CSS!

IE7 +
Firefox
Chrome
Safari
Opera

13. X:checked

Используя этот псевдо-класс можно выбрать элементы input типа radio или checkbox и причем только те которые выбраны/отмечены.

input[type=radio]:checked { border:8px solid yellow; }

IE9+
Firefox
Chrome
Safari
Opera

14. X:after

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
.clearfix {
    *display: inline-block;
    _height: 1%;
}

Этот хак использует псевдо-класс :after для того чтобы добавить пробел после элемента и запретить его обтекание. Есть еще аналогичный псевдо-класс :before.

IE8+
Firefox
Chrome
Safari
Opera

15. X:hover

Если нужно изменить стиль элемента при наведении на него мышкой, то этот псевдо-класс спешит на помощь.

div:hover { background: #ffffff; }

Будте внимательно т.к. в IE6 этот псевдо-класс должен применяться только к ссылкам.

IE6+
Firefox
Chrome
Safari
Opera

16. X:not(selector)

Как уже можно было догадаться — это отрицание.

div:not(#main) { margin: 0; }

Этим селектором выбрали все div за исключением того, у которого id=main.

IE9+
Firefox
Chrome
Safari
Opera

17. X::псевдо элемент

С помощью следующего кода можно выделить выделить и применить нужные стили к первой букве в абзаце и первой строке.

p::first-letter {
    float: left;
    font-size: 4em;
    font-weight: bold;
    font-family: cursive;
    padding-right:4px;
}
p::first-line {
   font-weight: bold;
   font-size: 2.2em;
}

IE6+
Firefox
Chrome
Safari
Opera

18. X:nth-child(n)

Есть возможность чтобы выделить третий элемент в списке. Это можно сделать следующим кодом:

li:nth-child(3) { color: blue; }

Можно выбрать каждый пятый элемент написав

li:nth-child(5n) { color: blue; }

IE9+
Firefox 3,5
Chrome
Safari
Opera

19. X:nth-last-child(n)

Можно выделить N-ный элемент с конца. Это особенно удобно если у вас есть большой список.

li:nth-of-type(4) { border: 1px solid white; }

IE9+
Firefox 3,5
Chrome
Safari
Opera

20. X:nth-of-type(n)

ul:nth-of-type(3) { border: 4px solid blue; }

Если нужно выбрать элемент определенного типа то этот селектор, то что нужно.

Представим, что на странице присутствуют десять неупорядоченных списков. Если вы хотите применить какие-то стили только к третьему ul, и он не имеет уникального id, нужно использовать nth-of-type.

IE9+
Firefox 3,5
Chrome
Safari
Opera

21. X:nth-last-of-type(n)

Можно также отсчитывать элементы, по типу, с конца.

ul:nth-last-of-type(3) { border: 4px solid blue; }

IE9+
Firefox 3,5
Chrome
Safari
Opera

22. X:first-child

Используйте его для выборки первого дочернего элемента.

ul li:first-child { border-top: none; }

IE7+
Firefox
Chrome
Safari
Opera

23. X:last-child

Используйте его для выборки последнего дочернего элемента.

ul > li:last-child { color: black; }

Обратите внимание! Предыдущий селектор поддерживается начиная с IE7, а этот только с IE9!

IE9+
Firefox
Chrome
Safari
Opera

24. X:only-child

div p:only-child { color: red; }

Довольно редкий селектор. Выберет только те , которые единственные внутри <div>.

<div>
    <p> Я первый параграф.</p>
</div>
<div>
    <p> Я второй параграф </p>
    <p> Я третий параграф </p>
</div>

В данном примере будет выбран тег из первого div т.к. он там единственный дочерний.

IE9+
Firefox
Chrome
Safari
Opera

25. X:only-of-type

li:only-of-type { font-weight: italic; }

Выбирает элементы, которые не имеют аналогичных соседей в пределах родительского элемента.

div p:only-of-type { font-color: red; }

<div>
   <p>Hello</p>
   <span>!!!</span>
</div>
<div>
   <p>Hello</p>
   <p>World</p>
   <span>!!!</span>
</div>

Из этого примера будет выбран тег из первого div.

IE9+
Firefox 3.5
Chrome
Safari
Opera

26. X:first-of-type

Выбирает первый элемент заданного типа.

<div>
    <p> Параграф </p>
    <ul>
        <li> Строчка 1 </li>
        <li> Строчка 2 </li>
    </ul>
    <ul>
        <li> Строчка 3 </li>
        <li> Строчка 4 </li>
    </ul>
<div>

Теперь давайте попробуем выбрать строчку 2.

Решение 1
ul:first-of-type > li:nth-child(2) { font-weight: bold; }

Решение 2
p + ul li:last-child { font-weight: bold; }

Решение 3
ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

IE9+
Firefox 3.5
Chrome
Safari
Opera

Изучаем CSS :)

Предыдущая работа

← Коротенький снипет для обрезания ссылки

Оставить комментарий

Все селекторы css