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

2

Від автора: Отже, ви вивчили основні селектори css: id, class, спадкування – і задоволені? Якщо так, то ви втрачаєте гігантський обсяг гнучкості. Хоча багато селектори, згадані в цій статті, є частиною специфікації CSS3 і, отже, є в наявності тільки на сучасних браузерах, ви повинні їх запам’ятати.

1.*

* {
margin: 0;
padding: 0;
}

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

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

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

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

Він вибере кожен окремий елемент, що є дочірнім div у #container. І ще раз, намагайтеся не користуватися цим прийомом занадто часто, або взагалі не користуйтеся.

Переглянути DEMO.

Сумісність

IE6+

Firefox

Chrome

Safari

Opera

2. #X

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

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

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

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

Переглянути DEMO.

Сумісність

IE6+

Firefox

Chrome

Safari

Opera

3. .X

.error {
color: red;
}

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

Переглянути DEMO.

Сумісність

IE6+

Firefox

Chrome

Safari

Opera

4. X Y

li a {
text-decoration: none;
}

Наступний найбільш коментований селектор — нащадок. Користуйтесь ним, коли до своїх селекторам потрібно поставитися більш конкретно. Наприклад, що робити, якщо ніж вибирати всі теги-прив’язки all, краще було б зробити своєю метою прив’язки всередині неупорядкованого списку? От коли ви обов’язково скористалися б спадкуванням селекторів.

Професійна підказка – якщо ваш селектор виглядає як X Y Z A B. error, ви чините неправильно. Завжди запитуйте себе, чи так вже абсолютно необхідно застосовувати всю цю навантаження.

Переглянути DEMO.

Сумісність

IE6+

Firefox

Chrome

Safari

Opera

5. X

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

Що, якщо потрібно вибрати всі елементи сторінки відповідно до їх типу, ніж по імені їх id або class ‘ а? Зробіть простіше і використовуйте селектор типу. Якщо потрібно вибрати все невпорядковані списки, застосуйте ul {}.

Переглянути DEMO.

Сумісність

IE6+

Firefox

Chrome

Safari

Opera

6. X:visited and X:link

Для вибірки всіх тегів-прив’язок, на які ще потрібно клацнути, ми користуємося псевдоклассом :link.

Як альтернатива, у нас є псевдоклас :visited, який, як передбачається, дозволяє нам застосовувати спеціальні стилі тільки до тегам-прив’язка на сторінці, на якій вже клацнули, або яку відвідали.

Переглянути DEMO.

Сумісність

IE7+

Firefox

Chrome

Safari

Opera

7. X + Y

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

Переглянути DEMO.

Сумісність

IE7+

Firefox

Chrome

Safari

Opera

8. X>Y

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

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

  • List Item
    • Child
  • List Item
  • List Item
  • List Item

Селектор #container > ul обере своєю метою тільки ті ul’и, які є прямими нащадками div а з id container. Він не вибере, наприклад, ul –нащадок першого li.

З цієї причини переваги продуктивності є у використанні дочірнього комбінатора. Власне, він надзвичайно рекомендується при роботі з движками CSS селекторів, заснованих на JavaScript.

Переглянути DEMO.

Сумісність

IE7+

Firefox

Chrome

Safari

Opera

9. X ~ Y

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

Переглянути DEMO.

Сумісність

IE7+

Firefox

Chrome

Safari

Opera

10. X[title]

a[title] {
color: green;
}

Відносяться до селекторам атрибутів, у вищенаведеному прикладі він вибере тільки теги-прив’язки, що мають атрибут title. Теги-прив’язки, що не мають його, не отримають цього конкретного стилю. А що, якщо вам потрібен спеціальний випадок ? Що ж…

Переглянути DEMO.

Сумісність

IE7+

Firefox

Chrome

Safari

Opera

11. X[href=»foo»]

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

Вищенаведений фрагмент визначить стилі всім тегам-прив’язки, які посилаються на http://net.tutsplus.com; вони отримають наш фірмовий зелений колір. Всі інші теги-прив’язки залишаться недоторканими.

Зверніть увагу, що ми укладаємо значення в лапки. Пам’ятайте, що це також потрібно робити при використанні движка селекторів JavaScript CSS. Переважно перед неофіційними методами, завжди користуйтеся селекторами CSS3, коли можливо.

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

Переглянути DEMO.

Сумісність

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 в до е? Якщо потрібно більш точно визначити, використовуйте ^ і & посилання відповідно на початок і кінець рядка.

Переглянути DEMO.

Сумісність

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, можна застосувати селектор, подібний вищезазначеного фрагменту.

Зверніть увагу, що ми не шукаємо http://; він не потрібний і не несе відповідальності за до и, що починаються з https://.

Тепер, якщо б нам було потрібно замість цього визначити стиль всім прив’язки, які посилаються на, скажімо, фотографію? У цьому випадку давайте пошукаємо кінець рядка.

Переглянути DEMO.

Сумісність

IE7+

Firefox

Chrome

Safari

Opera

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

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

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

Переглянути DEMO.

Сумісність

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 до кожної прив’язці, що посилається на зображення?

Image Link

Потім, за допомогою цього готового до роботи прийому, можна використати стандартний селектор атрибутів для виділення виключно потрібних прив’язок.

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

Переглянути DEMO.

Сумісність

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, який може отримати розділений пробілами список чого завгодно, що потрібно позначити. У цьому випадку ми відзначимо зовнішні посилання на зображення — просто для прикладу.

Click Me, Fool

За допомогою готової до роботи розмітки ми тепер можемо вибрати будь-теги з будь-якими з цих значень, використовуючи прийом селектора атрибутів ~.

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

Переглянути DEMO.

Сумісність

IE7+

Firefox

Chrome

Safari

Opera

17. X:checked

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

Цей псевдоклас вибере тільки перевірений елемент користувацького інтерфейсу – як кнопка радіо або checkbox (прямокутник для позначення вибраного режиму, стану або дії (на екрані дисплея)). Просто, як двічі два.

Переглянути DEMO.

Сумісність

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

Ой, да ладно! Це ви знаєте. Офіційний термін для нього: user action pseudo class (псевдоклас користувача). Назва збиває з пантелику, але насправді він не такий. Хочете, коли користувач проводить миші над елементом, застосувати спеціальні стилі? Він виконає цю роботу!

Пам’ятайте, що більш стара версія Internet Explorer не відповідає на застосування псевдокласу :hover до чого-небудь, крім тега-посилання.

Найчастіше ми використовуємо цей селектор при застосуванні до тегам-прив’язки, наприклад, border-bottom , коли над ними проводять мишею.

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

Професійна підказка — border-bottom: 1px solid black; виглядає краще, ніж text-decoration: underline;.

Сумісність

IE6+

Firefox

Chrome

Safari

Opera

20. X:not(selector)

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

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

Або, якщо б я хотів вибрати кожен окремий елемент (не раджу), крім тегів абзацу, можна було б зробити:

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

Переглянути DEMO.

Сумісність

IE9+

Firefox

Chrome

Safari

Opera

21. X::pseudoElement

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

Можна використовувати псевдоелементи (призначені ::) для призначення стилів фрагментів елемента, таким, як перша рядок або перша літера. Пам’ятайте про те, що для того, щоб мати ефект, вони повинні бути застосовані для блокових елементів.

Псевдоэлемент складається з двох двокрапки: ::

Виберіть першу букву абзацу

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.2 em;
}

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

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

Переглянути DEMO.

Сумісність

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) для виділення кожного четвертого пункту списку.

Переглянути DEMO.

Сумісність

IE9+

Firefox

Chrome

Safari

Opera

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

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

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

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

Переглянути DEMO.

Сумісність

IE9+

Firefox

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.

Переглянути DEMO.

Сумісність

IE9+

Firefox

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

Chrome

Safari

Opera

26. X:first-child

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

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

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

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

Переглянути DEMO.

Сумісність

IE7

Firefox

Chrome

Safari

Opera

27. X:last-child

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

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

Приклад

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

Розмітка

  • List Item
  • List Item
  • List Item

Тут немає нічого особливого; всього лише простий список.

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 рамки для забезпечення глибини.

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

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

Як видно на зображенні вгорі, єдина проблема полягає в тому, що рамка буде застосовуватися до самого верху і низу неупорядкованого списку – це виглядає дивно. Давайте для усунення цієї проблеми використовуємо псевдокласи :first-child :last-child.

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

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

Ось так; все виправлено!

Переглянути DEMO.

Сумісність

IE9+

Firefox

Chrome

Safari

Opera

Ага … IE8 підтримував :first-child , але не:last-child. Спробуй розберися!

28. X:only child

div p:only child {
color: red;
}

Чесно кажучи, ви, ймовірно, не надто часто застанете себе за використанням псевдокласу only child. Незважаючи на все, якщо він знадобиться, то цілком доступний.

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

Уявімо наступну розмітку.

My paragraph here.

Two paragraphs total.

Two paragraphs total.

У цьому випадку другі абзаци div а не будуть обрані; тільки перший div. Як тільки ви застосуєте більше одного дочірнього елемента, псевдоклас only child перестане мати ефект.

Переглянути DEMO.

Сумісність

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

Переглянути DEMO.

Сумісність

IE9+

Firefox 3.5+

Chrome

Safari

Opera

30. X:first-of-type

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

Перевірка

Для кращого розуміння давайте проведемо тест. Скопіюйте у свій редактор коду наступну розмітку:

My paragraph here.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

Тепер, не читаючи далі, спробуйте здогадатися, як вибрати тільки «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 на сторінці, потім знаходимо перший пункт списку, але починаємо з кінця!

Переглянути DEMO.

Сумісність

IE9+

Firefox 3.5+

Chrome

Safari

Opera

Висновок

Якщо ви коригуєте більш старі браузери типу Internet Explorer 6, вам все ж слід бути обережним при використанні нових селекторів. Але, будь ласка, не дозволяйте відлякати вас від їх вивчення. Ви зробите собі цим ведмежу послугу. Не соромтеся звірятися тут зі списком сумісності з браузерами. Як альтернативу можна використовувати прекрасний скрипт IE9.js Dean Edward’а для надання цим селекторам підтримки в старих браузерах.

По-друге, при роботі з бібліотеками JavaScript, зразок популярного jQuery, завжди, де це можливо, намагайтеся віддавати перевагу використанню «рідних» селекторів CSS3 перед одними методами/селекторами бібліотеки. Ваш код від цього стане виконуватися швидше, так як движок селекторів може використовувати споконвічний парсинг браузера охочіше, ніж свій власний.

Спасибі за прочитання уроку з селекторам CSS, сподіваюся, ви засвоїли кілька прийомів!

Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.