1. Універсальний селектор *
Давайте почнемо з простих селектор, перш ніж перейдемо до просунутим селекторам.
Універсальний селектор (символ зірки) призначений кожному елементу на сторінці. Багато розробники використовують цей прийом, щоб обнулити padding і margin. Хоча це, звичайно, прекрасно для швидких тестів, я рекомендую не використовувати цей селектор в вашому коді. Це додає занадто багато ваги на браузер, що є зайвим.
Зірку можна використовувати як нащадок.
Даний стиль буде призначатися кожному елементу нащадку блоку #container.
2. #X або ID-селектори
Символ решітки перед селектором дозволяє нам призначити id (ідентифікатор). На відміну від класів, ідентифікатор можна використовувати всього один раз на сторінці; тому для повторюваних елементів використовуйте селектори класів. Майте також на увазі, що Id-селектори мають більш високий пріоритет, ніж селектори класів.
3. X або селектори класів
Це селектор класу. Всі селектори класів починаються з точки. Селектори класів можна використовувати незалежно від тегів. Як вже було сказано - використовуйте селектори класів для повторюваних елементів.
4. X Y або селектор нащадків
Перед вами селектор нащадок. Коли вам знадобиться змінити який-небудь елемент, який стоїть усередині інших елементів, то використовуйте селектори нащадків. Наприклад, що якщо вам необхідно призначити стиль тегу a. який лежить в межах переліку? Безумовно, для цих цілей краще всього використовувати селектори нащадків.
5. X або селектор типу
Що якщо вам потрібно призначити стиль елементу згідно його типу, а не по class або id. Все просто - використовуйте селектор типу. Якщо вам знадобляться всі невпорядкований списки сторінки, то застосуєте ul <> .
6. Псевдокласи X: visited і X: link
Псевдоклас: link позначає всі посилання, за якими користувач ще не переходив.
Псевдоклас: visited. навпаки, позначає ті посилання, за якими користувач уже кликав
7. X + Y або Селектор сестринських елементів
Суміжні (або сестринські) селектори. Позначає елемент, який стоїть безпосередньо за іншим елементом. Дані елементи повинні мати одного з батьків і перебувати на одному рівні. У нашому випадку, тільки перший параграф, після кожного невпорядкованого списку (ul), буде мати червоний колір.
8. X> Y або селектор дочірніх елементів
Різниця між конструкцією X Y і X> Y в тому, що остання позначає тільки дочірній елемент. Для прикладу, подивіться наступну розмітку.
Селектор #container> ul позначить тільки ul. який є дочірнім елементом контейнера з id = container. І він не торкнеться, в даному випадку, елемент ul. який є дочірнім елементом тега li.
Це родинний селектор він схожий на X + Y. однак, він менш суворий. У той час як суміжний селектор (ul + p) вибирає тільки перший елемент, що стоїть безпосередньо за попереднім селектором, цей селектор більш загальний. Даний селектор вибере, см. Приклад, всі елементи p стоять за тегом ul.
селектори атрибутів
10. X [title]
Так званий селектор атрибуту, для нашого прикладу - див. Вище, вибере тільки якірний тег, у якого присутній атрибут title. Але що якщо вам потрібно більше конкретики?
11. X [href = "foo"]
12. X [href * = "dnzl"]
Те, що нам потрібно. Тут за допомогою зірочки ми вибираємо все теги a. атрибут href яких має слово dnzl. Це і dnzl.ru. і dnzl.ru/view_post.php і т.д.
Але що якщо ми хочемо задати стиль всім якірним тегам, які відсилають нас до фото?
14. X [href $ = ". Jpg"]
15. X [data - * = "foo"]
Але все ж. Як нам описати селектор, який стосується усі формати зображень? Ми можемо створити груповий селектор, наприклад:
Але так чинити не доцільно. Інше можливе рішення - використовувати звичайний атрибут. Що якщо ми додамо свій власний атрибут data-filetype кожному тегу a. який посилається на зображення?
Потім ми можемо використовувати селектор атрибуту, щоб позначити всі необхідні посилання.
Чи не багато людей знають про цю виверту. символ тильда
дозволяє нам вибрати атрибут, який має розділений пробілами список значень.
Наприклад, як і в пункті 15 ми можемо створити свій атрибут data-info. у якого необхідно через пробіл виставити ряд значень. У цьому випадку, щоб виділити всі зовнішні посилання і посилання на зображення, слід зробити так:
Псевдокласи і псевдоелементи
17. X: checked
Цей псевдоклас вибере все елементи призначеного для користувача інтерфейсу (такі як перемикач або прапорець), які помічені за допомогою атрибута checked.
18. X: after
Псевдоелементи-селектори: before та: after додають сгенерированное вміст перед елементом і, відповідно, після елемента. Багато дізналися про дані класах, коли зіткнулися з clear-fix хаком.
Псевдоелемент-селектор: after додає пробіл після елемента і забороняє його обтікання.
19. X: hover
Псевдоклас: hover дозволяє змінювати вид посилання, на яку користувач навів мишку.
Ви можете додати, наприклад, нижню межу, коли користувач навів покажчик мишки на посилання.
20. X: not (selector)
Псевдоклас заперечення особливо корисний. Скажімо, я хочу вибрати все блоки div. крім одного, у якого id дорівнює container. Наведений вище код впоратися з цим.
Або, якщо я хочу вибрати всі елементи крім параграфа, то:
21. X :: pseudoElement
Ми можемо використовувати псевдоелементи, щоб форматувати певний фрагмент елемента, наприклад, перший рядок (: first-line) або буквицю (: first-letter). Ці псевдоелементи необхідно застосовувати тільки до блокових елементів.
22. X: nth-child (n)
Результат для різних значень псевдокласу: nth-child
n - лічильник. який автоматично приймає значення 0. 1. 2.
Пам'ятайте дні, коли не могли виділити елемент в стеці? Псевдоклас nth-child вирішує цю проблему.
Відзначте, що nth-child приймає в якості значення число, однак це число починається не з нуля. Якщо ви хочете вибрати другий елемент списку, застосувати li: nth-child (2). Щоб вибрати кожен четвертий елемент списку потрібно використовувати наступну конструкцію: li: nth-child (4n).
23. X: nth-last-child (n)
Що робити, якщо у вас великий список, і вам необхідно вибрати третій елемент списку з кінця? Замість конструкції li: nth-child (397). ви можете використовувати псевдоклас nth-last-child. Підрахунок ведеться з кінця.
24. X: nth-of-type (n)
Настануть часи, коли замість дочірнього елемента, вам доведеться вибрати елемент типу.
Уявіть розмітку, яка складається з п'яти невпорядкованих списків. Якщо ви захочете вибрати тільки третій ul. і не маєте при цьому унікальний id. ви маєте право застосувати псевдоклас nth-of-type (n). У коді вище тільки третій ul має кордон.
25. X: nth-last-of-type (n)
Ми також можемо використовувати nth-last-of-type, щоб почати відлік з кінця списку.
26. X: first-child
Дозволяє оформити тільки перший дочірній елемент батька. Дуже корисна річ, особливо для видалення кордонів у першого і останнього елемента списку.
Наприклад, у вас є список рядків, і кожна має border-top і border-bottom. Тут перший і останній пункт будуть виглядати трохи дивно.
Ви можете використовувати ці псевдокласи, щоб обнулити кордону.
27. X: last-child
Даний селектор вказує на останній дочірній елемент тега батька.
Наприклад, у нас є невпорядкований список.
Даний стиль встановить фон, видалить padding у тега ul. і призначить кордону тегам li (що додасть деяку глибину).
Одна проблема кордону у нижнього і верхнього тега li виглядають безглуздо. Щоб виправити це досить застосувати псевдокласи: first-child і: last-child.
28. X: only-child
Псевдоклас only-child дозволяє вибрати тільки один дочірній елемент тега батька. Наприклад, стосовно розмітки вгорі, тільки одні дочірній параграф елемента div забарвиться в червоний колір.
Погляньте на розмітку:
В цьому випадку параграфи в другому елементі div вибрані не будуть; тільки перший.
29. X: only-of-type
Псевдоклас only-of-type вибере елементи, які не мають сестринських елементів в своєму рідному контейнері. Наприклад, давайте виберемо все ul. який мають один елемент списку.
30. X: first-of-type
Псевдоклас first-of-type дозволяє вибирати перші сестринські елементи свого типу.