Селекторы Flashcards
Универсальный селектор: синтаксис и описание
*{}
Обращаемся ко всем элементам на странице.
Обычно задаётся margin: 0; padding: 0; , тогда все элементы “прилипнут” к верхнему левому углу родителя/окна браузера и уже к этому значению добавлять отсупы и поля.
Селектор элемента: примеры
h1 {}
ul{}
body{}
p {}
img{}Селектор класса/идентификатора
.one {} / #one
Селектор потомка
ul li { }- обращаемся ко всем li списка ul
Дочерний селектор
.name > h1 - обращаемся к заголовку первого уровня внутри блока с классом “name”.
Разница мкжду селекторами .name h1 {} и .name > h1 {}
В первом случае мы обращаемся к заголовкам внутри блока “name”, а во втором - только при условии, что заголовок является потомком блока “name”
Соседский/сестринский селектор
E+F - обращаемся к элементу F только в том случае, если элемент этот расположен в коде Сразу После элемента E. Причём, написание F+E в данном случае бцдет некоректным
Селектор атрибута
Если есть html:
<img></img>, то в цсс к атрибуту alt можно обратиться с помощью [квадратных скобочек]:
[alt] {color:red;}
Селекторы псевдоклассов
:hover, :after и т.д. явояются и псевдоклассами и селекторами псевдоклассов одновременно, так как присутствуют только в CSS
Псевдокласс :root
Соответствует тегу (корневому)
Структурныe псевдоклассы :nth-child(even) и :nth-child(odd)
Обращаются к чётным и нечётным потомкам
Структурный псевдокласс :nth-child(3)
Обращается к третьему дочернему элементу
Структурные псевдоклассы :first-child и :last-child
Обращаются к первому и последнему потомку
Псевдокласс :only-child
Обращается к элементу, только если он единственный потомок
:first-of-type, :last-of-type
:nth-of-type (3)
:nth-last-of-type, :nth-first-of-type
:only-of-type
Структурные псевдоклассы типа
