CSS-селектори на кожен день

види селекторів

Селектор тегів, як селектор виступає ім'я тега, для якого необхідно змінити властивості.

Універсальний селектор, який позначається символом * і застосовується для зміни необхідних властивостей всіх елементів на сторінці.

Класи, застосовуються для елементів з атрибутом class і необхідним значенням.

Ідентифікатори, застосовуються для елементів з атрибутом id і необхідним значенням. Основна відмінність класів від ідентифікаторів полягає в тому, що імена друге повинні бути унікальними, не повторюватися, що дозволяє їх використовувати разом зі скриптами (JavaScript).

Псевдо-класи призначені для зміни стилю існуючих елементів сторінки в залежності від їх динамічного стану, наприклад при роботі з посиланнями (: link,: visited,: hover,: active,: focus). Псевдо-елементи визначають стиль елементів, чітко не визначений в структурі документа (: first-letter,: first-line), а також дозволяють генерувати і стилізувати неіснуюче вміст (: before,: after і властивість content). В CSS3 псевдо-елементи починаються з двох двокрапок :: (:: first-letter, :: first-line, :: before, :: after).

Селектори атрибутів. Дозволяють стилізувати елемент не тільки за значенням тега, але і за значенням атрибута (a [attr]).

Контекстні селектори. Стилізація елементів, що знаходяться всередині іншого елемента (ab).

Дочірні селектори. Стилізація елемента, розташованого відразу за іншим елементом і є його прямим нащадком (a> b).

Сусідні селектори. Призначені для стилізації сусідніх елементів, у яких загальний батько. (A + b)

Споріднені селектори. Схожі з сусідніми селекторами, але з тією різницею, що стилізує все сусідні елементи, а не тільки перший сусідній елемент. Вперше з'явилися в CSS3. (A ~ b).

Отже, приступимо!

*

  * {
  margin: 0;
  padding: 0;
  }
 

Почнемо з найпростіших речей для новачків, перш ніж перейдемо до просунутим селекторам.

Зірочка дозволяє вибрати всі елементи на сторінці. Багато веб-розробники використовують це для "обнулення" всіх зовнішніх і внутрішніх відступів.

Також символ * можна використовувати для дочірніх елементів об'єкта.

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

Цей код націлений на всі елементи, які є дочірніми по відношенню до блоку з ідентифікатором container.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

#X

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

Символ решітки дозволяє нам відбирати елементи за ідентифікатором. Це один з найбільш поширених способів відбору елементів, однак будьте обережні при його використанні.

"Запитайте себе: Мені точно необхідно використовувати id для якогось елементу, щоб послатися на нього?"

Селектори id негнучкий і їх важко використовувати повторно в різних проектах. Якщо можливо, намагайтеся спочатку використовувати ім'я тега або навіть псевдо-клас.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

.X

  .error {
  color: red;
  }
 

Це селектор класу. Різниця між id і класами в тому, що за допомогою класів можна вибирати відразу кілька елементів. Використовуйте класи, якщо Вам потрібно застосувати один стиль до групи елементів.

В іншому випадку використовуйте id для знаходження "голки в стозі сіна" і застосування стилю тільки до одного конкретного об'єкту.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

XY

  li a {
  text-decoration: none;
  }
 

Наступний часто використовуваний тип селектора - селектор нащадка. Його слід використовувати, коли потрібно проводити більш точковий відбір елементів.

Наприклад, як бути, якщо потрібно вибрати не всі теги посилань, а тільки ті, що знаходяться всередині невпорядкованого списку? Це як раз той випадок, коли слід використовувати селектор нащадка.

"Порада: Якщо Ваш селектор схожий на XYZA B.error, то Ви, ймовірно, щось робите на так. Завжди запитуйте себе, чи дійсно це найпростіший спосіб"

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X

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

Що, якщо Ви хочете заслати на всі елементи певного типу на сторінці, якщо у них немає id або класів? Робіть простіше, використовуйте селектори типу. Якщо Вам потрібно вибрати всі неврегульовані списки, використовуйте ul {}.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: visited і X: link

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

Тут ми використовуємо псевдо-клас: link для вибору всіх посилань, на яких ще не був здійснений клік.

Також є псевдо-клас: visited, який, як Ви й очікували, дозволяє нам застосувати стиль лише до тих посиланнях, за якими було здійснено клік або перехід.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X + Y

  ul + p {
  color: red;
  }
 

Це так званий суміжний селектор. У цьому випадку кожен параграф наступний відразу після кожного елемента ul буде червоного кольору.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X> Y

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

Різниця між XY і X> Y в тому, що останній вибере тільки прямих нащадків. Розглянемо наступний приклад:

  <Div id = "container">
  <Ul>
  <Li> Приклад
  <Ul>
  <Li> Нащадок </ li>
  </ Ul>
  </ Li>
  <Li> Приклад </ li>
  <Li> Приклад </ li>
  <Li> Приклад </ li>
  </ Ul>
  </ Div>
 

Селектор #container> ul вибере тільки ті елементи ul, які є прямими нащадками блоку div з ідентифікатором container. Тобто в даному випадку цей селектор не забере елемент ul, який є нащадком першого елемента li.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X ~ Y

  ul ~ p {
  color: red;
  }
 

Ця комбінація сестринських (сіблінгових) елементів схожа на X + Y, але вона менш сувора. Якщо в разі ul + p будуть обрані тільки перші елементи p, наступні за ul (тобто спостерігається суміжність у виборі), то ми розглядаємо, зараз селектор більш загальний.

У нашому випадку він відбере всі елементи p, наступні за елементом ul.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [title]

  a [title] {
  color: green;
  }
 

Тут ми звертаємося до атрибуту селектора. У нашому прикладі будуть пофарбовані в зелений колір тільки посилання, які мають атрибут title.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [href = "foo"]

  a [href = "http://www.codeharmony.ru"] {
  color: red;
  }
 

Код вище дозволить надати стиль всіх посиланнях, атрибут href у яких дорівнює http://www.codeharmony.ru. Ці посилання будуть червоного кольору. Решта посилання не отримають даного стилю.

Це працює добре, але це трохи негнучке. Що, якщо посилання на насправді веде на Codeharmony.ru але, можливо, адреса вказана, як codeharmony.ru а не http://www.codeharmony.ru? У таких випадках ми можемо використовувати основи регулярних виразів.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [href * = "codeharmony"]

  a [href * = "codeharmony"] {
  color: red;
  }
 

Поїхали далі; це якраз те, що нам потрібно. Зірочка означає, що шукане значення може перебувати в будь-якій частині атрибута href. Таким чином, ми можемо відібрати і http://www.codeharmony.ru і www.codeharmony.ru і codeharmony.ru.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [href ^ = "http"]

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

Ви коли-небудь думали про те, як на деяких сайтах поряд з посиланнями, що ведуть на інші сайти (зовнішні по відношенню до поточного) проставлені невеликі іконки, які дають знати про це користувачеві? Це відмінні "нагадувалки" користувачеві про те, що посилання веде на інший сайт.

Робиться це за допомогою символу ^ (карат). Він зазвичай використовується в регулярних виразах для позначення початку рядка. Якщо ми хочемо відібрати посилання, у яких атрибут href починається з http, то ми можемо використовувати селектор з прикладу вище.

"Зверніть увагу, що ми не шукаємо http: //. Це необов'язково і, до того ж, не враховує посилання з протоколу https: //."

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [href $ = ". Jpg"]

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

І знову ми використовуємо регулярний вираз і символ $ для того, щоб позначити кінець рядка. В даному прикладі ми шукаємо всі посилання, які посилаються на картинки з розширенням .jpg. Зрозуміло, такий підхід не буде працювати для картинок з розширеннями .gif, .png і т.д.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [data - * = "foo"]

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

Як же ми можемо охопити різні типи картинок? Ми можемо створити, наприклад, кілька селекторів:

  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"> Посилання </a> 

Поступово таким чином, ми можемо використовувати код даного прикладу:

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

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X [foo ~ = "bar"]

  a [data-info ~ = "external"] {
  color: red;
  }

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

Ось ще один цікавий трюк, про який не всі знають. Знак ~ (тильда) дозволяє нам вибирати атрибути зі значеннями, розділеними пробілами, тобто

  <a href="path/to/image.jpg" data-info="external image"> Кликни сюди </a> 

Використовуючи даний прийом ми можемо робити вибірки з потрібними нам комбінаціями:

  / * Відібрати атрибут data-info, який містить значення external * /
  a [data-info ~ = "external"] {
  color: red;
  }

  / * І відібрати атрибут data-info, який містить значення image * /
  a [data-info ~ = "image"] {
  border: 1px solid black;
  }
 

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: checked

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

Цей псевдо-клас відбирає ті елементи, які були відзначені, наприклад, радіокнопку або чекбокс.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: after

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

  .clearfix {
  * Display: inline-block;
  _height: 1%;
  }
 

Даний псевдо-клас дозволяє згенерувати контент навколо обраного елемента.

Даний приклад показує, як за допомогою псевдо-класу: after після блоку з класом .clearfix створюється порожній рядок, після чого очищується. Хороший метод, коли неможливо застосувати overflow: hidden.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: hover

  div: hover {
  background: # e3e3e3;
  }
 

Це Ви точно знаєте. Офіційна назва звучить на кшталт "псевдо-клас, заснований на дії користувача". Звучить страшнувато, хоча на ділі все просто. Хочете застосувати до елементу певний стиль, коли на нього наводиться курсор миші? Це воно саме!

"Пам'ятайте, що старі версії IE не розуміють цього псевдо-класу по відношенню до чого-б то не було, крім тега а."

Часто даний прийом використовується для завдання нижньої межі для посилань при наведенні на них курсору:

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

"Мега-чит: border-bottom: 1px solid black; виглядає краще, ніж text-decoration: underline;"

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+ (в IE6 працює тільки по відношенню до посилань)	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: not (selector)

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

Заперечення може бути також дуже корисним. Припустимо, я хочу вибрати все блоки div, крім одного з ідентифікатором container. Для цього відмінно підійде код з запереченням (не дорівнює).

Якщо ж мені потрібно вибрати всі елементи, крім тегів параграфів, то можна написати так:

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

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X :: pseudoElement

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

Псевдоелементи можна використовувати для додання стилів фрагменту елемента, наприклад, першому рядку або першою літерою. Застосовується тільки до блокових елементів.

Вибираємо першу букву параграфа:

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

Аналогічно до попереднього прикладу, але в даному випадку буде обрана перший рядок кожного параграфа.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: nth-child (n)

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

Пам'ятайте часи, коли ми не мали можливості звернутися до конкретного порядковому елементу-нащадку? Даний псевдо-клас вирішує цю проблему!

Як параметр приймається ціле число. Якщо потрібно вибрати 2-й елемент списку, потрібно використовувати конструкцію: li: nth-child (2).

Ми можемо навіть вибирати групи елементів-нащадків. Наприклад, щоб вибрати кожен четвертий елемент списку, потрібно використовувати конструкцію: li: nth-child (4n).

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: nth-last-child (n)

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

Що, якщо у Вас є великий невпорядкований список і Вам потрібно, наприклад, вибрати третій елемент з кінця. Замість того, щоб писати li: nth-child (397), Ви можете скористатися псевдо-класом nth-last-child.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: nth-of-type (n)

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

Іноді бувають ситуації, коли замість того, щоб вибирати певних нащадків, потрібно зробити вибір за типом елемента.

Уявіть, що на сторінці є п'ять невпорядкованих списків. Якщо Вам потрібно застосувати стилі тільки до третього списку, але у нього немає унікального ідентифікатора і інших "зачіпок", то можна скористатися псевдо-класом nth-of-type (n). У коді вище показаний спосіб додання стилю тільки третього неупорядкованого списку.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+		1.0+	1.0+	1.0+	1.0+

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

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

Так, для повноти картини є і такий варіант. Так можна вибрати n-ний елемент певного типу з кінця.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: first-child

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

Цей псевдо-клас дозволяє вибрати тільки першого нащадка батьківського елемента. Часто використовується для видалення кордонів першого і останнього елементів списку.

Наприклад, якщо у вас є список рядів, кожен з яких має border-top і border-bottom, то останній і перший елементи списку будуть трохи вибиватися із загального ладу.

Для усунення цього недоліку можна використовувати даний псевдо-клас.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: last-child

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

На противагу класу first-child, last-child вибере останній елемент батьківського елемента.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: only-child

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

Чесно кажучи, це досить рідко використовується псевдо-клас, але, тим не менш, він теж буває корисний. Він дозволяє вибрати Вам ті елементи, які є єдиними нащадками для своїх батьків.

У нашому прикладі стиль буде застосований лише до параграфу, який є єдиним нащадком блоку div.

Давайте розглянемо для наочності таку розмітку:

  <Div> <p> Тут йде єдиний в блоці параграф. </ P> </ div>

  <Div>
  <P> Тут йде перший параграф в блоці. </ P>
  <P> Тут йде другий параграф в блоці. </ P>
  </ Div>
 

В цьому випадку параграфи в другому блоці div вибрані не будуть. Стиль буде застосований лише до параграфу з першого блоку div.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

X: only-of-type

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

Цей псевдо-клас вибирає елементи, які не мають сестринських елементів в містить їх контейнері. Наприклад, давайте виберемо все ul, які містять самотні li.

Ви могли б написати ul li, але цей спосіб вибере всі елементи li. Єдиний спосіб - використовувати only-of-type.

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

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

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

Є багато способів вирішити цю задачу. Розглянь лише деякі з них. Почнемо з використання first-of-type:

  ul: first-of-type> li: nth-child (2) {
  font-weight: bold;
  }
 

Даний код говорить: "Знайди перший невпорядкований список на сторінці, потім знайди тільки його прямих нащадків, які є елементами li. Після цього вибери тільки другий по порядку елемент li."

рішення 2

Інший варіант - скористатися суміжних селектором:

  p + ul li: last-child {
  font-weight: bold;
  }
 

Тут ми знаходимо ul, наступний безпосередньо за тегом параграфа, після чого знаходимо найостанніший його дочірній елемент.

рішення 3

Можна ще трохи пограти з селекторами і вчинити таким чином:

  ul: first-of-type li: nth-last-child (1) {
  font-weight: bold;
  }
 

Зараз ми вже отримуємо перший елемент ul на сторінці, потім шукаємо найперший елемент li, але починаючи з кінця.

сумісність:

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

висновок

Якщо Ви все ще пишете код, беручи до уваги існування IE6, то Вам потрібно бути гранично обережним при використанні нових селектор. Але не робіть з цього виправдання, не кажіть, що Вам це не потрібно знати - цим Ви ускладнити життя самому собі.

Якщо Ви працюєте з будь-якими JavaScript-бібліотеками, наприклад, з jQuery, то завжди намагайтеся використовувати "рідні" CSS3 селектори, коли це можливо. У цьому випадку Ваш код буде працювати швидше.

Пам'ятка CSS селекторів