комбинированные селекторы

Question 1

div.className, .className1.className2 etc

Answer 1

Когда мы хотим выбрать элемент по тегу с определенным классом или элемент с двумя и более классами сразу - селектор составляется одной строкой из всех частей, БЕЗ пробелов

Question 2

div li
ul .className
.name1 .name2 a

Answer 2

КОНТЕКСТНЫЙ или вложенный селектор. позволяет применить стили к элементу, ТОЛЬКО если он ВЛОЖЕН в другой элемент

Question 3

селектор1 + селектор2

Answer 3

СОСЕДНИЕ селекторы. Стили применяются к элементу с селектором2 только, если ПЕРЕД ним расположен элемент с селектором1

Question 4

ul > li
ul > li > span

Answer 4

ДОЧЕРНИЕ селекторы. Дочерний элемент - БЛИЖАЙШИЙ потомок ()выше по уровню вложенности), а потомки - это любые элементы внутри родителя
Селектор выбирает все дочерние элементы

Question 5

li:first-child
li:last-child

Answer 5

ПСЕВДОКЛАССЫ. Всегда записываются через ОДНО ДВОЕТОЧИЕ.
Выбирают первый дочерний элемент родителя (первый li из всех) и последний

Question 6

li:nth-child(n)

Answer 6

ПСЕВДОКЛАСС. Выбирает дочерний элемент по порядковому номеру

Question 7

button:hover

Answer 7

ПСЕВДОКЛАСС. Используется для добавлении стилей при НАВЕДЕНИИ на элемент

Question 8

:link
:visited
:active

Answer 8

ПСЕВДОКЛАССЫ для ссылок
1. еще не посещенные ссылки
2. посещенные ссылки
3. активные ссылки, т.е. кнопка мыши зажата на ссылке

Question 9

:focus

Answer 9

ПСЕВДОКЛАСС для элемента, находящегося в фокусе. Например, текстовое поле с установленным курсором. Полезен при перемещении по странице при помощи TAB

Question 10

Селекторы атрибутов

Answer 10

Запись: элемент[атрибут]. Выбирает элемент по АТРИБУТУ. Полезен для работы с формами
Пример: input[type=’text’]

Question 11

селектор

Answer 11

Селектор по id

Question 12

:not(селектор)

Answer 12

ПСЕВДОКЛАСС. Позволяет выбрать элементы, которые не содержат указанный селектор
НЕЛЬЗЯ передавать: двойной not, комбинированные селекторы, псевдоэлементы, селекторы-потомки, групповые селекторы

Question 13

:nth-last-child(n)

Answer 13

Псевдокласс. Отсчет ведется от последнего элемента

Question 14

:first-of-type
:last-of-type

Answer 14

ПЕРВЫЙ/ПОСЛЕДНИЙ дочерний элемент родителя, С УЧЕТОМ ТИПА, т.е. тега.
Пример: первый найденный ul, даже если перед ним в родителе есть другие теги

Question 15

:nth-of-type(n)
:nth-last-of-type(n)

Answer 15

n-ый по счету элемент С НАЧАЛА/С КОНЦА, среди всех указанных дочерних элементов
Пример: ul:nth-of-type(2)

Question 16

селектор1 ~ селектор2

Answer 16

Селектор СЛЕДУЮЩИХ элементов. Стили применятся к элементу с селектором2, только если перед ним есть элемент с селектором1. Должны быть в ОДНОМ РОДИТЕЛЕ. НЕ ОБЯЗАТЕЛЬНО СТОЯТ РЯДОМ

Question 17

:empty

Answer 17

ПСЕВДОКЛАСС. Выбирает все элементы, у которых нет дочерних узлов, в т.ч. текстовых

Question 18

:only-child

Answer 18

Псевдокласс. ЕДИНСВЕННЫЙ дочерний элемент внутри родителя

Question 19

:only-of-type

Answer 19

Псевдокласс. ЕДИНСТВЕННЫЙ дочерний элемент родителя с ОПРЕДЕЛЕННЫМ ТИПОМ (названием тега)
Пример: p:only-of-type - выберет тег p в родителе, если он единственный

Question 20

::before
::after

Answer 20

ПСЕВДОЭЛЕМЕНТЫ. Позволяет вставить псевдотег внутрь другого элемента В НАЧАЛО/В КОНЕЦ. Оюязательно свойство content - содержимое
Ведет себя как span

Question 21

::first-line и ::first-letter

Answer 21

Псевдоэлементы. Стиль для первой строки или первой буквы текста. Применимы только свойства шрифтов