1

Topic: Основные виды селекторов CSS

Итак, вы изучили принцип наследования и основные селекторы: id и class - и думаете, что готовы к бою? Но, поверьте, вы очень многое упустили. Несмотря на то, что многие из описанных в этой статье селекторов являются частью спецификации CSS3, и поддерживаются только современными браузерами, вы просто обязаны их знать.

1. *


* {
 margin: 0;
 padding: 0;
}

Начнём с самого простого.

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

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

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

В данном примере стиль применится ко всем потомкам элемента #container div. Но, повторюсь, не стоит использовать эту технику слишком часто, а лучше вообще её не использовать.

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

IE6+
Firefox
Chrome
Safari
Opera

2

Re: Основные виды селекторов CSS

2. #X

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

Использование символа решётки позволяет обратиться к уникальному идентификатору элемента id. Но старайтесь не злоупотреблять использованием идентификаторов.

Спросите себя: мне действительно нужно использовать id для этого элемента?

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

Демо
Совместимость
IE6+
Firefox
Chrome
Safari
Opera

3

Re: Основные виды селекторов CSS

3. .X

.error {
color: red;
}

class - это селектор класса. Отличие селектора class от id в том, что класс не должен быть уникальным и может использоваться для выбора нескольких элементов на странице. Использование id позволяет выбрать конкретный уникальный элемент.

Совместимость
IE6+
Firefox
Chrome
Safari
Opera

4

Re: Основные виды селекторов CSS

4. X Y

li a {
text-decoration: none;
}

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

Совет - Если ваш селектор выглядит так: X Y Z A B.error, то вы совершаете ошибку. Старайтесь избегать таких длинных вложений.

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

IE6+
Firefox
Chrome
Safari
Opera

5

Re: Основные виды селекторов CSS

5. X

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

Что вы будете делать, если вам понадобится выбрать только элементы определённого типа? В этом случае вы не сможете использовать id или class. И вам на помощь придёт селектор по типу элемента. Если вам нужны все несортированные списки, просто используйте ul {}.

Совместимость
IE6+
Firefox
Chrome
Safari
Opera

6

Re: Основные виды селекторов CSS

6. X:visited и X:link

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

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

Также нам доступен псевдокласс :visited для стилизации только тех ссылок, на которые пользователь нажал.

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

IE7+
Firefox
Chrome
Safari
Opera

7

Re: Основные виды селекторов CSS

7. X + Y

ul + p {
 color: red;
}

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

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

IE7+
Firefox
Chrome
Safari
Opera

8

Re: Основные виды селекторов CSS

8. X > Y

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

Разница между селекторами X Y и X > Y в том, что в последнем примере мы выберем только прямого потомка. Например, у нас есть такой код.

<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

Селектор #container > ul выберет только тот элемент ul, который является прямым потомком элемента div с id равным container. Он не выберет, например, элемент ul , являющийся потомком первого элемента li.

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

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

IE7+
Firefox
Chrome
Safari
Opera

9

Re: Основные виды селекторов CSS

9. X ~ Y

ul ~ p {
 color: red;
}

Этот селектор похож на X + Y, но он менее строгий. Соседний селектор (ul + p) выберет только первый элемент, следующий сразу же за указанным элементом. Селектор X ~ Y выберет все элементы p, расположенные после элемента ul.

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

IE7+
Firefox
Chrome
Safari
Opera

10

Re: Основные виды селекторов CSS

10. X[title]

a[title] {
 color: green;
}

Это селектор атрибутов. Он выберет только те ссылки, у которых имеется указанный атрибут title. Но что, если вам нужно что-то более конкретное? Что же...

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

IE7+
Firefox
Chrome
Safari
Opera

11

Re: Основные виды селекторов CSS

11. X[href="foo"]

a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}

Указанный выше код выберет все ссылки, указывающие на http://net.tutsplus.com. Они окрасятся в зелёный цвет. Стиль остальных ссылок останется без изменений.

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

Этот метод отлично работает, но он слишком строгий. Что, если ссылка указывает на Nettuts+, но путь прописан как nettuts.com? В этом случае мы можем использовать синтаксис регулярных выражений.

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

IE7+
Firefox
Chrome
Safari
Opera

12

Re: Основные виды селекторов CSS

12. X[href*="nettuts"]

a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}

Вот то, что нам нужно. Звёздочка означает, что указанное значение должно быть частью указанного атрибута. Поэтому этот селектор выберет и nettuts.com, и net.tutsplus.com,, и даже tutsplus.com.

Но помните, что этот способ слишком обширен. Что, если у вас будет ссылка, не указывающая на tuts+, но имеющая в адресе слово tuts? Для составления более строго правила используйте ^ и $, указывающие на начало и конец строки соответственно.

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

IE7+
Firefox
Chrome
Safari
Opera

13

Re: Основные виды селекторов CSS

13. X[href^="http"]

a[href^="http"] {
 background: url(path/to/external/icon.png) no-repeat;
 padding-left: 10px;
}

Вам было интересно как на некоторых сайтах реализован показ иконки возле внешних ссылок? Уверен, вы встречали подобное. Иконка напоминает, что это внешняя ссылка, которая переведёт вас на другой сайт.

Это как раз случай использования символа ^. В регулярных выражениях он используется для указания начала строки. Если мы хотим выбрать все ссылки, начинающиеся с http, то мы можем использовать код из примера сверху.

Учтите, что мы не ищем http://. В этом нет необходимости.

А что, если мы хотим стилизовать все ссылки, указывающие, например, на фото? В этом случае нас интересует конец строки.

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

IE7+
Firefox
Chrome
Safari
Opera

14

Re: Основные виды селекторов CSS

14. X[href$=".jpg"]

a[href$=".jpg"] {
 color: red;
}

Мы используем символ из регулярных выражений $, который указывает на конец строки. В этом случае мы ищем все ссылки на фото, т.е. путь в них должен заканчиваться на .jpg. Учтите, что это не сработает для файлов gif и png.

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

IE7+
Firefox
Chrome
Safari
Opera

15

Re: Основные виды селекторов CSS

15. X[data-*="foo"]

a[data-filetype="image"] {
 color: red;
}

Как же нам выбрать все типы изображений, включая png, jpeg,jpg, gif? Мы можем создать такой селектор:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
 color: red;
}

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

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Теперь мы можем использовать селектор атрибутов для выбора только этих ссылок.

a[data-filetype="image"] {
 color: red;
}

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

IE7+
Firefox
Chrome
Safari
Opera

16

Re: Основные виды селекторов CSS

16. X[foo~="bar"]

a[data-info~="external"] {
 color: red;
}
 
a[data-info~="image"] {
 border: 1px solid black;
}

Вот пример, который поразит ваших коллег. Этот трюк известен очень немногим. Символ тильда (~) позволяет выбрать атрибут, в котором есть значения, разделённые пробелом.

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

"<a href="path/to/image.jpg" data-info="external image"> Нажми на меня, дурашка </a>

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

/* Выбираем атрибут data-info со значением "external" */
a[data-info~="external"] {
 color: red;
}
 
/* Выбираем атрибут со значчением "image" */
a[data-info~="image"] {
border: 1px solid black;
}

Прикольно, правда?

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

IE7+
Firefox
Chrome
Safari
Opera

17

Re: Основные виды селекторов CSS

17. X:checked

input[type=radio]:checked {
 border: 1px solid black;
}

Данный псевдокласс выберет только отмеченные элементы пользовательского интерфейса: радиокнопки или чекбоксы. Вот так просто.

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

IE9+
Firefox
Chrome
Safari
Opera

18

Re: Основные виды селекторов CSS

18. X:after

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

Многие впервые знакомятся с этими псевдоклассами при изучении хака clear-fix.

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

Этот хак использует псевдокласс :after для добавления пробела после элемента. Обязательно занесите этот трюк в свою копилку знаний. Он особенно полезен там, где нельзя использовать overflow: hidden;.

Ещё один интересный пример использования этих псевдоклассов: советы по созданию теней.

Согласно спецификации CSS3, псевдоклассы должны отделяться двойным двоеточим ::. Но современные браузеры прекрасно поймут ваш код и с одним двоеточим. На самом деле я рекомендую вам использовать в своих проектах одно двоеточие.

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

IE8+
Firefox
Chrome
Safari
Opera

19

Re: Основные виды селекторов CSS

19. X:hover

div:hover {
background: #e3e3e3;
}

Ой, ну ладно. Вы, конечно же, знаете этот селектор. Официальное его название псевдокласс пользовательского действия. Звучит немного странно. На практике это означает, что вы сможете изменить стиль элемента в момент наведения на него кусора мыши.

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

Чаще всего вы будете использовать этот селектор для стилизации ссылок (border-bottom) при наведении кусора.

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

Совет - border-bottom: 1px solid black; выглядит гораздо лучше чем text-decoration: underline;.

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

IE6+ (в IE6, :hover может применяться только к ссылкам)
Firefox
Chrome
Safari
Opera

20

Re: Основные виды селекторов CSS

20. X:not(selector)

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

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

Или, например, если я хочу выбрать каждый элемент на странице (не делайте так), кроме тэгов p.

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

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

IE9+
Firefox
Chrome
Safari
Opera