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

2. #X

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

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

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

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

4. X Y

li a {
text-decoration: none;
}

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

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

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

6. X:visited и X:link

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

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

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

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

IE7+
Firefox
Chrome
Safari
Opera

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.

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

10. X[title]

a[title] {
 color: green;
}

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

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

12. X[href*="nettuts"]

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

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

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

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

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

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

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

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

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;
}

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

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

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, псевдоклассы должны отделяться двойным двоеточим ::. Но современные браузеры прекрасно поймут ваш код и с одним двоеточим. На самом деле я рекомендую вам использовать в своих проектах одно двоеточие.

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

20. X:not(selector)

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

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

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

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

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

22. X:nth-child(n)

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

Помните деньки, когда у нас не было возможности выбрать конкретный элемент в стеке? Псевдокласс nth-child решает эту проблему!

Помните, что nth-child принимает в качестве параметра число, но отсчёт ведётся не от нуля. Если вам нужен второй по счёту элемент, используйте li:nth-child(2).

мы можем использовать этот псевдокласс для выбора нескольких элементов. Например, li:nth-child(4n) позволит нам выбрать каждый четвертый элемент списка.

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

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

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

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

Представьте, что у вас на странице есть пять списков. И вам нужно стилизовать только третий список. И у него нет уникального id. Тут вам и пригодится псевдокласс nth-of-type(n). В примере выше только у третьего списка будет рамка.

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

26. X:first-child

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

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

Например, у вас есть какое-то количество строк, каждая из которых имеет border-top и border-bottom. В этом случае первая и последняя строка будут выглядеть не очень красиво.

Многие дизайнеры используют классы first и last для устранения дублирующихся рамок. Но лучше использовать эти псевдоклассы.

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

28. X:only-child

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

Честно говоря, вряд ли вы будете использовать псеводкласс only-child очень часто. Но он существует, и знание о нём вам точно не повредит.

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

Давайте рассмотрим такой пример.

<div><p> My paragraph here. </p></div>
 
<div>
 <p> Two paragraphs total. </p>
 <p> Two paragraphs total. </p>
</div>

В этом случае текст во втором элементе div останется без изменений. Только текст в первом div станет красным. Если у элемента более одного наследника, псевдокласс only-child не действует.

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