30 CSS селекторів, які ви повинні запам'ятати

Отже, ви вивчили принцип спадковості й основні селектори: id, class i descendant - і думаєте, що готові до бою? Але, повірте, ви дуже багато втратили. Незважаючи на те, що багато з описаних в цій статті селекторів є частиною специфікації CSS3, і підтримуються лише сучасними браузерами, ви просто зобов'язані їх знати.

1. *

* {
 margin: 0;
 padding: 0;
}

Почнемо з самого простого.

Універсальний селектор відповідає будь-якому елементу на сторінці. Часто розробники використовують його для обнулення властивостей margin і padding. Це допустимо в тестовому режимі, але я не рекомендую використовувати цей селектор в робочих проектах. Він занадто навантажує браузер.

Універсальний селектор * також можна використовувати для стилізації всіх нащадків елемента

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

В даному прикладі стиль застосується до всіх нащадках елемента #container div. Але, повторюся, не варто використовувати цю техніку надто часто, а краще взагалі її не використовувати.

Демо

Сумісність

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2. #X

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

Використання символу решітки дозволяє звернутися до унікальним ідентифікатором елемента id. Але намагайтеся не зловживати використанням id ідентифікаторів.

Запитайте себе: мені дійсно потрібно використовувати id для цього елемента?

Ідентифікатор id повинен бути унікальним і може використовуватися на сторінці тільки один раз. При можливості намагайтеся обходитися без ідентифікаторів. Намагайтеся використовувати теги HTML5 або псевдокласи.

Демо

Сумісність

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. .X

.error {
  color: red;
}

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

Демо

Сумісність

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. X Y

li a {
  text-decoration: none;
}

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

Рада - Якщо ваш селектор виглядає так: X Y Z A B.error, то ви робите помилку. Намагайтеся уникати таких довгих вкладень.

Демо

Сумісність

• IE6+
• Firefox
• Chrome
• Safari
• Opera

5. X

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

Що ви будете робити, якщо вам потрібно буде вибрати тільки елементи певного типу? В цьому випадку ви не зможете використовувати id або class. І вам на допомогу прийде селектор по типу елемента. Якщо вам потрібні всі несортовані списки, просто використовуйте ul {}.

Демо

Сумісність

• IE6+
• Firefox
• Chrome
• Safari
• Opera

6. X:visited та X:link

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

Ми використовуємо псевдоклас :link для стилізації посилань, на які користувач ще не натискав.

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

Демо

Сумісність

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7. X + Y

ul + p {
   color: red;
}

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

Демо

Сумісність

• 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 з CSS-селекторами.

Демо

Сумісність

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y

ul ~ p {
   color: red;
}

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

Демо

Суміність

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10. X[title]

a[title] {
   color: green;
}

Це селектор атрибутів, в нашому прикладі вище, це вибирає тільки анкерні теги, які мають атрибут title. Анкорні теги, що не не отримають цей конкретний стиль. Але, якщо вам потрібен бути більш конкретним? Тоді...

Демо

Сумісність

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11. X[href="foo"]

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

Зазначений вище код вибере всі посилання, що вказують на https://net.tutsplus.com. Вони забарвляться в зелений колір. Стиль інших посилань залишиться без змін.

Не забудьте, що значення атрибута потрібно брати в лапки. Особливо уважні будьте при використанні JavaScript з CSS-селекторами. Коли це можливо, завжди використовуйте CSS3 селектори над неофіційними методами.

Цей метод відмінно працює, але він занадто суворий. Що, якщо посилання вказує на Nettuts +, але шлях прописаний як nettuts.com? У цьому випадку ми можемо використовувати синтаксис регулярних виразів.

Демо

Сумісність

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12. X[href*="nettuts"]

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

Ось те, що нам потрібно. Зірочка означає, що вказане значення має бути частиною зазначеного атрибута. Тому цей селектор вибере і nettuts.com, і net.tutsplus.com, і навіть tutsplus.com.

Але пам'ятайте, що цей спосіб широкої заяви. Що, якщо у вас буде посилання, які не вказує на сайти Envato, але має в адресі слово tuts? Для складання більш строго правила використовуйте ^ і $, що вказують на початок і кінець рядка відповідно.

Демо

Сумісність

• IE7+
• Firefox
• Chrome
• Safari
• Opera

13. X[href^="http"]

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

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

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

Врахуйте, що ми не шукаємо https://. Це непотрібно, особливо з посиланнями, які починаються із https://.

А що, якщо ми хочемо стилізувати все посилання, що вказують, наприклад, на фото? У цьому випадку нас цікавить кінець рядка.

Демо

Сумісність

• IE7+
• Firefox
• Chrome
• Safari
• Opera

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

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

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

Демо

Сумісність

• IE7+
• Firefox
• Chrome
• Safari
• Opera

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. 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"> Click Me, Fool </a>

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

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

Класно, авжеж?

Демо

Сумісність

• IE7+
• Firefox
• Chrome
• Safari
• Opera

17. X:checked

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

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

Демо

Сумісність

• IE9+
• Firefox
• Chrome
• Safari
• Opera

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. 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. X:not(selector)

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

Псевдоклас negation (заперечення) буває дуже корисний. Уявіть, що вам потрібно вибрати всі теги div, крім одного з id рівним container. Приклад вище впорається з цим завданням відмінно.

Або, наприклад, якщо я хочу вибрати кожен елемент на сторінці (Не робіть так), крім тегів р.

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

Демо

Сумісність

• IE9+
• Firefox
• Chrome
• Safari
• Opera

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

Псеводелемент ::first-line, як ви вже здогадалися, вибере тільки перший рядок зазначеного елемента.

"Для сумісності з існуючими стилями, браузери підтримують старий синтаксис написання псевдоелементів, задекларований в специфікаціях CSS 1 та 2 (:first-line, :first-letter ,:before та :after). Але для нових псевдоелементів такий синтаксис не підтримується." - Джерело

Демо

Сумісність

• IE6+
• Firefox
• Chrome
• Safari
• Opera

22. X:nth-child(n)

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

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

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

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

Демо

Сумісність

• IE9+
• Firefox 3.5+
• Chrome
• Safari

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

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

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

Цей метод працює аналогічно nth-child, Відмінність в тому, що відлік елементів ведеться з кінця.

Демо

Сумісність

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

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

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

Буває, що замість спадкоємців child вам потрібно вибрати елементи по їх типу (type).

Уявіть, що у вас на сторінці є п'ять списків. І вам потрібно стилізувати тільки третій список ul. І у нього немає унікального id. Тут вам і стане в нагоді псевдоклас nth-of-type (n). В наведеному вище прикладі тільки у третього списку (ul) буде рамка.

Демо

Сумісність

• IE9+
• Firefox 3.5+
• Chrome
• 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+
• Chrome
• Safari
• Opera

26. X:first-child

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

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

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

Багато дизайнерів використовують класи first і last для усунення дубльованих рамок. Але краще використовувати ці псевдокласи.

Демо

Сумісність

• IE7+
• Firefox
• Chrome
• Safari
• Opera

27. X:last-child

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

На відміну від first-child, last-child вибере останній дочірній елемент.

Приклад

Давайте розглянемо приклад використання цих псевдокласів. Створимо список.

Markup

  <ul>
     <li> List Item </li>
     <li> List Item </li>
     <li> List Item </li>
  </ul>

Нічого особливого, лише простий список.

CSS

ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}

li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

Ми задали фон, прибрали дефолтні відступи в списку ul, що додаються браузером, і додали верхній і нижній бордер кожному елементу li.

Для додавання глибини списку використовуйте border-bottom для кожного елемента li на пару відтінків темніше, ніж колір фону li.  Далі додайте border-top на пару відтінків світліше.

Є одна проблема: перший і останній елементи списку виглядають не дуже. Давайте виправимо це за допомогою :first-child та :last-child.

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

li:last-child {
   border-bottom: none;
}

Продовжимо; це поправили!

Демо

Сумісність

• IE9+
• Firefox
• Chrome
• Safari
• Opera

До речі, в IE8 є підтримка :first-child, але відсутня :last-child. Вот так.

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.

Демо

Сумісність

• IE9+
• Firefox
• Chrome
• Safari
• Opera

29. X:only-of-type

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

Цей псевдоклас можна використовувати досить оригінальними способами. Він вибере дочірній елемент, тільки якщо він єдиний у батька. Наприклад, давайте виберемо все списки ul, що мають тільки один елемент списку.

Як ми можемо вирішити цю задачу? Можна використовувати ul li, але тоді ми виберемо всі елементи списку. Єдиним рішенням буде використовувати only-of-type.

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

Демо

Сумісність

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

30. X:first-of-type

Псевдоклас first-of-type вибирає першого спадкоємця зазначеного типу.

Тест

Для кращого засвоєння давайте пройдемо тест Розмістіть цей код в свій текстовий редактор:

<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>

   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>   
</div>

Тепер, не читаючи далі, спробуйте вибрати тільки елемент "List Item 2". Читайте далі після того, як вирішите задачу (або здастеся).

Рішення 1

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

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

Цей код каже «знайди перший несортоване список, потім знайди його прямого спадкоємця, який є елементом списку. Далі вибери другий елемент ».

Рішення 2

Інший спосіб - використання сусіднього селектора.

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

Тут ми знаходимо список ul, наступний відразу ж за тегом p, а потім знаходимо його останній дочірній елемент.

Рішення 3

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

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

Тут ми вибираємо перший список ul, потім знаходимо перший елемент списку з кінця! :)

Демо

Сумісність

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

Висновок

Якщо вам доводиться підтримувати старі браузери, такі як Internet Explorer 6, то будьте обережні з використанням нових селекторів. Але нехай це не стане приводом відмовитися від їх вивчення. Цим ви співслужили собі погану службу. Слідкуйте за списком сумісності браузерів. Також ви можете використовувати чудовий скрипт IE9.js, написаний Діном Едвардом.

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

Дякую за увагу, сподіваюся вам знадобляться поради, описані в цій статті!