Таблица CSS-селекторов

К основным видам селекторов CSS относятся:

-Селекторы a-lesh Первая Версия 1

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

Этот псевдо-класс выбирает первого элемента заданного типа.