Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)
Отже, ви вивчили принцип спадковості й основні селектори: 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 селектори замість пропонованих бібліотекою методів. Це прискорить роботу вашого коду, так як ви знімете з бібліотеки навантаження по обробці селектор, переклавши її на плечі браузера.
Дякую за увагу, сподіваюся вам знадобляться поради, описані в цій статті!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post