Таблица CSS-селекторов
К основным видам селекторов CSS относятся:
1. *
Символ звездочка в CSS позволяет обратиться ко всем элементам страницы. Чаще всего данный селектор применяют для обнуления всех отступов (margin и padding)
2. #name
Символ решетка — ID селектора. Позволяет добавить правила для элемента с id по имени name.
3. .name
Точка в CSS — это селектор класса. Позволяет добавить правила для элемента с классом по имени name.
4. a b (пробел)
Селектор потомка. Для более точного отбора элементов указывают селектор родителя и через пробел селектор потомка.
5. a
Для выбора всех элементов нужного типа на странице документа используют данный css селектор (например: li, p, div и т.п.).
6. a:visited и a:link
Два данных псевдокласса чаще всего используются для ссылок.
Псевдокласс link — для выбора всех ссылок на которых еще не было клика.
Псевдокласс visited — для выбора всех ссылок на которых был клик.
7. a + b
Знак плюс в CSS используется для выбора первого элемента b которые следуют сразу после элемента a.
8. a > b
Позволяет выбрать прямых потомков элемента a.
9. a ~ b
Знак тильда в CSS используется для выбора всех элементов b которые следуют после элемента a.
10. a [title]
Квадратные скобки в CSS используются для обращения к атрибуту селектора. В данном случае свойства применяться для всех элементов с атрибутом title.
11. a [href=»text»]
Придает стиль всем ссылкам с атрибутом href равным text.
12. a [href*=»text»]
Звездочка используется в CSS для придания стиля всем ссылкам в атрибуте href которых есть text в любом месте.
13. a [href^=»http»]
Символ карат в CSS используют для отбора ссылок атрибут href которых начинается с http.
14. a [href$=».jpg»]
Символ доллара в CSS используют для отбора ссылок атрибут href которых заканчивается на .jpg.
15. a [data-*=»text»]
Выбор всех ссылок с атрибутом вида data-имя равным text.
16. a [atribut~=»name»]
Позволяет выбрать атрибуты со значениями разделенными пробелами в состав которых входит name.
17. b:checked
Этот псевдо-класс выберет все элементы b, которые были отмечены (radiobutton или checkbox).
18. b:after
Позволяет сгенерировать контент после элемента b.
19. b:hover
Псевдо-класс позволяющий задать оформление элементу когда на него наводится курсор мыши.
20. b:not(#name)
Позволяет выбрать все блоки кроме элементов с id равным name.
21. b:first-letter и b:first-line
Псевдоэлементы для придания стелей первой букве и первой строке.
22. b:nth-child(n)
Позволяет обратиться к конкретному порядковому элементу-потомку. Где n — номер элемента.
23. b:nth-last-child(n)
Позволяет обратиться к конкретному элементу-потомку с конца списка. Где n — номер элемента с конца списка.
24. b:nth-of-type(n)
Позволяет обратиться к конкретному типу элементов по порядковому номеру. Где n — порядковый номер.
25. b:nth-last-of-type(n)
Позволяет обратиться к конкретному типу элементов порядковому номеру с конца списка. Где n — порядок с конца списка.
26. b:first-child
Псевдо-класс который позволяет выбрать первого потомка родительского элемента.
27. b:last-child
Псевдо-класс который позволяет выбрать последнего потомка родительского элемента.
28. b:only-child
Псевдо-класс позволяет выбрать потомка который является единственным у родительского элемента.
29. b:only-of-type
Этот псевдо-класс выбирает элементы, которые не имеют сестринских элементов в содержащем их контейнере.
30. b:first-of-type
Этот псевдо-класс выбирает первого элемента заданного типа.