CSS селекторы – одна из главных особенностей языка CSS. Селекторы позволяют обратиться как к группе элементов, так и к только одному из них.

Селекторы в CSS

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

P{
Стили…
}

В данном случае селектором выступает p – тег абзацев. Такое правило добавит стили для всех абзацев на веб-странице.

Какими бывают css селекторы?

Селектор тега – самый простой . Он был продемонстрирован в примере. Чтобы записать его в css, нужно написать имя тега без угловых скобок. Стили будут применены ко всем элементам с таким тегом.
Table{} – стили для всех таблиц
Li{} – стили для всех пунктов списка
A{} – стили для всех ссылок

Стилевой класс – к любому элементу на веб-странице можно привязать стилевой класс. Даже к одной букве. Потом в css-файле можно обратиться к этому элементу, прописав для него собственные стили. Для этого нужно поставить точку и написать имя стилевого класса после нее. Примеры:
.about{} – правила применятся ко всем элементам, которые имеют атрибут class = “about”
.down{} – правила применятся ко всем элементам, которые имеют атрибут class = “down”
.float{} – правила применятся ко всем элементам, которые имеют атрибут class = “float”

Как видите, главное поставить точку. Стилевой класс можно привязывать к неограниченному количеству элементов. Элементу можно прописать несколько классов.

Идентификатор – еще один вид селекторов. Один идентификатор можно задать только одному элементу. Он не может иметь двух идентификаторов, а также id привязанный к этому элементу, не может быть прописан нигде более.

Задается он так:

Абзац

То есть также, как и класс, только используется атрибут id в качестве значения которого используется любое слово.

Чтобы обратиться к элементу с идентификатором через css нужно написать значение id и перед ним поставить решетку.

#first{
Font-size: 22px
}

Мы обратились к абзацу с id = first . Стиль применится только к нему. У остальных абзацев размер шрифта не изменится.

В данной статье речь пойдет про CSS-селекторы. Будут рассмотрены как старые CSS-селекторы, которые поддерживает даже IE6, так и совсем новые CSS3-селекторы, которые поддерживают только последние версии браузеров. Итак, начнем.

1.

* { margin: 0; padding: 0; }

Начнем с самого простого, а потом уже перейдем к более продвинутым вещам.

Этот CSS-селектор выделяет каждый элемент на странице. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding. На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит броузер.

* также можно использовать для выделения дочерних элементов.

#container * { border: 1px solid black; }

В данном случае выделяться все дочерние элементы #container. Опять же, старайтесь не злоупотреблять им.

Совместимость

• IE6 +
• Firefox
• Chrome
• Safari
• Opera

2. #X

container { width: 960px; margin: auto; }

Знак решетки перед CSS-селектором Х выделит нам элемент с id = Х. Это очень просто, но будьте аккуратны при использовании id.

Спросите себя: мне абсолютно необходимо выделение по id?

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

Совместимость

• IE6 +
• Firefox
• Chrome
• Safari
• Opera

3 .Х

error { color: red; }

Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.

Совместимость

• IE6 +
• Firefox
• Chrome
• Safari
• Chrome

4. Х Y

li a { text-decoration: none; }

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

Не следует делать CSS-селекторы вида Х Y Z A B.error . Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.

Совместимость

• IE6 +
• Firefox
• Chrome
• Safari
• Chrome

5. X

a { color: red; } ul { margin-left: 0; }

Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul {} .

Совместимость

• IE6 +
• Firefox
• Chrome
• Safari
• Opera

a:link { color: red; } a:visted { color: purple; }

Мы используем псевдо-класс:link, для выделения всех ссылок, на которые еще не кликнули.

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

Совместимость

• IE7 +
• Firefox
• Chrome
• Safari
• Opera

7. Х+Y

ul + p { color: red; }

Выделяет последующий элемент. Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.

Совместимость

• IE7 +
• Firefox
• Chrome
• Safari
• Chrome

8. Х>Y

div#container > ul { border: 1px solid black; }

Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.

CSS-селектор #container > ul выберет только ul-ы, которые являются непосредственными дочерними элементами div с id =container . Он не выберет, например, ul-ы, являющиеся дочерними элементами первых li .

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

Совместимость

• IE7 +
• Firefox
• Chrome
• Safari
• Opera

9. Х ~ Y

ul ~ p { color: red; }

Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие на ul.

Совместимость

• IE7 +
• Firefox
• Chrome
• Safari
• Opera

10. X

a { color: green; }

В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.

Совместимость

• IE7 +
• Firefox
• Chrome
• Safari
• Opera

11. X

a { color: #ffde00; }

Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.

Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на , а например на ? В этих случаях мы можем использовать регулярные выражения.

Совместимость

• IE7 +
• Firefox
• Chrome
• Safari
• Chrome

12. X

a { color: # 1f6053; }

Совместимость

• IE7 +
• Firefox
• Chrome
• Safari
• Opera

13. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }

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

“^” – наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.

Обратите внимание, что мы не ищем “http://”. Это не правильно, поскольку не учитываются адреса, начинающиеся с https://

А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец строки.

Совместимость

• IE7 +
• Firefox
• Safari
• Опера

14. X

a { color: red; }

Опять же, мы используем символ регулярного выражения “$” для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит “.jpg”.

Совместимость

• IE7 +
• Firefox
• Safari
• Опера

15. X

a{ color: red; }

Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:

A, a, a, a { color: red; }

Но это неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?

Ссылка на изображение

A { color: red; }

Совместимость

• IE7 +
• Firefox
• Safari
• Опера

16. X

a { color: red; } a { border: 1px solid black; }

А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.

Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.

Click Me

Вот, Html-код на месте, теперь напишем стили.

Неплохо, да?

Совместимость

• IE7 +
• Firefox
• Safari
• Опера

17. X:checked

input:checked { border:1px solid black; }

Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны. Очень просто.

Совместимость

• IE9 +
• Firefox
• Safari
• Опера

18. X:after

Псевдоклассы:before и:after очень крутые. Создается впечатление, что каждый день появляются новые способы их эффективного использования. Они просто генерируют контент вокруг выбранного элемента.

Многие познакомились с этими псевдоклассами при работе с clear-fix hack.

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

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

Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.

Совместимость

• IE8 +
• Firefox
• Safari
• Опера

19. X:hover

div:hover { background: #e3e3e3; }

Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS -селектор для вас.

Имейте в виду, что старые версии Internet Explorer применяют:hover только к ссылкам.

Этот CSS -селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.

A:hover { border-bottom: 1px solid black; }

border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;

Совместимость

• IE6 + (В IE6: hover должен быть применен к ссылке)
• Firefox
• Safari
• Опера

20. X:not(selector)

div:not(#container) { color: blue; }

Псевдокласс отрицания бывает очень полезным. Скажем, нужно выбрать все div, за исключением того, который имеет id = container . Приведенный выше код справиться с этим!

Или, если необходимо выбрать все элементы, за исключением p.

*:not(p) { color: green; }

Совместимость

• IE9 +
• Firefox
• Safari
• Опера

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

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

Псевдо-элемент задается двумя двоеточиями: ::

Выбираем первую букву в параграфе

P::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right:2px; }

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

Выбираем первую строку в абзаце

P::first-line { font-weight: bold; font-size: 1.2em; }

Аналогичным образом благодаря::first-line мы задаем стиль первой строки в абзаце.

“Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and:after) . Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации”

Совместимость

• IE6 +
• Firefox
• Safari
• Опера

22. X:nth-child(n)

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

Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!

Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .

Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0} .

Совместимость

• IE9 +
• Firefox 3,5 +
• Safari

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

li:nth-last-child(2) { color: red; }

Что делать, если у вас огромный список элементов в ul , а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child .

Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.

Совместимость

• IE9 +
• Firefox 3,5 +
• Safari
• Опера

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

ul:nth-of-type(3) { border: 1px solid black; }

Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.

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

Совместимость

• IE9 +
• Firefox 3,5 +
• Safari

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

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

Мы можем также использовать nth-last-of-type , отсчитывая элементы с конца.

Совместимость

• IE9 +
• Firefox 3,5 +
• Safari
• Опера

26. X:first-child

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

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

Совместимость

• IE7 +
• Firefox
• Safari
• Опера

27. X:last-child

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

В противоположность :first-child:last-child выбирает последний дочерний элемент.

Совместимость

• IE9 + (Да да, IE8 поддерживает:first-child , но не поддерживает:last-child. Microsoft-у привет!)
• Firefox
• Safari
• Опера

28. X:only-child

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

Вы не часто встретите этот псевдокласс, тем не менее он существует.

Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:

Будет выбран p только первого div`a, потому что он единственный дочерний элемент.

Совместимость

• IE9 +
• Firefox
• Safari
• Опера

29. X:only-of-type

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

Единственное решение заключается в использовании only-of-type .

Ul > li:only-of-type { font-weight: bold; }

Совместимость

• IE9 +
• Firefox 3,5 +
• Safari
• Опера

30. X:first-of-type

first-of-type выбирает первый элемент заданного типа.

Чтобы лучше понять, приведем