Від автора: Кожен раз при використанні CSS ми застосовуємо селектори. Але, незважаючи на це, селектори CSS –один з найбільш пренебрегаемых розділів специфікації.
Ми говоримо про великих перетвореннях в CSS3, але часто забуваємо про основи. Правильне застосування селекторів спрощує і прикрашає щоденне кодування. Сьогодні я хочу розповісти про 10 селекторах, які часто вислизають з пам’яті, але є ефективними і дуже корисними.
* (зірочка)
Може бути, простіше всього згадати про селекторі *, але він часто поки ще не реалізується. Він призначає всіх елементів на сторінці стилі і чудово підходить для створення скидання, а також створення стилів сторінки за замовчуванням, таких як потрібні вам шрифти і розмір.
* {
margin: 0;
padding: 0;
font-family: helvetica, arial, sans-serif;
font-size: 16px;
}
A + B
Цей селектор називається суміжних і вибирає той елемент, який слід відразу за першим. Якщо вам потрібно вибрати перший div після заголовка, то ви напишете:
header + div {
margin-top: 50px;
}
A > B
Цей селектор вибере тільки прямі дочірні елементи, на відміну від селектора A B, який обере дочірні елементи A будь-якого рівня. Цей селектор рекомендується при роботі з дочірніми елементами першого рівня батьківського елемента. Наприклад, якщо вам потрібно вибрати елементи списку першого рівня у неупорядоченном списку, це виглядає так:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Ви застосуєте цей селектор тому, що звичайний селектор A B також обере елементи списку в межах вкладеного неупорядкованого списку
ul > li {
background: black;
color: white;
}
A[href*=”example”]
Це – дійсно класний селектор, коли потрібно трохи по-іншому призначити стилі окремої ссылке; те, що знаходиться в лапках, буде порівняна з href посилання. Наприклад, для призначення стилів всіх посиланнях на facebook синього кольору ви застосуєте:
a[href*=”facebook”] {
color: blue;
}
Є ще версія без *, яка зіставляє точний url, який можна використовувати для точних посилань.
A:not(B)
Цей селектор особливо гарний з-за свого негативного вираження, що дозволяє вам вибрати будь-яку групу елементів, які не збігаються з тим, що ви розміщуєте в B. Якщо хочете вибрати кожен div за винятком нижнього колонтитула, вам потрібно всього лише:
div:not(.footer) {
margin-bottom: 40px;
}
A:first-child / A:last-child
Селектори first-child і last-child дозволяють вибирати перший і останній дочірні елементи батьківського елемента. Вони дуже допомагають, коли справа доходить до елементів списку і видалення правого поля і рамок. Для видалення рамки у першому елементі списку і поля в останньому вам знадобиться:
ul li:first-child {
border: none;
}
ul li:last-child {
margin-right: 0px;
}
A:nth-child(n)
Селектор nth-child – простий спосіб вибрати будь дочірній елемент по порядку. Якщо, наприклад, вам потрібен третій елемент неупорядкованого списку, результат вийде такий:
ul li:nth-child(3) {
background: #ccc;
}
Можна застосовувати nth-child для вибору кожного множника числа, використовуючи змінну n , наприклад, якщо вставити 3n, він вибере номер елемента списку 3, 6, 9, 12 і так далі.
A:nth-last-child(n)
Селектор nth-last-child працює як nth-child, але замість того, щоб почати відлік з першого елемента списку, він починає вважати з останнього, тому якщо ви застосуєте його з числом два, він вибере той елемент списку, який йде перед останнім, і буде застосовуватися як селектор nth-child:
ul li:nth-last-child(2) {
background: #ccc;
}
A:nth-of-type(n)
Цей селектор робить в точності те, про що ви подумали; дивиться, елемент якого виду ви помістили в нього і вибирає, наприклад, третій елемент на сторінці, що відповідає тому, що ви написали. Для вибору третього абзацу div е ви застосуєте:
div p:nth-of-type(3) {
font-style: italic;
}
A:visited
Коли-небудь звертали увагу на те, що при пошуку чого-небудь в google вже відвідані вами сторінки стають іншого кольору? Саме це робить селектор відвідали. Він – відмінне додаток для користувачів, але іноді він нього забувають і, судячи з мого досвіду, він дуже зручний при пошуку в google.
a:visited {
color: blue;
}
Заключна думка
З мого досвіду застосування цих видів селекторів при вертске може заощадити багато часу, а також уникнути необхідності в переповненні розмітки безліччю ID. І це – тільки початок, існує ще безліч дійсно зручних селекторів, про яких іноді забувають.
