Изучил все селекторы на тренажерах, что-то их оказалось очень много, решил законспектировать чтобы запомнить их все. На всякий случай выложу здесь, вдруг кому пригодится освежить в памяти или я потеряю свой файл с данным конспектом.
Простые селекторы:
- Селектор по тегу ---------------------------------------------------------------------------------------------
teg - Селектор по классу -------------------------------------------------------------------------------------
.class - Селектор по id ------------------------------------------------------------------------------------------------
#id
Комбинированные селекторы:
- Селектор уточняющий по тегу и классу -
teg.class - Селектор работающий ТОЛЬКО при наличии двух и более классов -
.class1.class2 - Селектор контекстный срабатывает для всех потомков указанного родителя -
.parent .child
/вместо классов могут быть любые из выше перечисленных селекторов - #id, teg и т.д./ - Селектор контекстный срабатывает только для дочернего элемента внутри указанного родителя -
.parent>.child
/вместо классов могут быть любые из выше перечисленных селекторов - #id, teg и т.д./ - Селектор применяет CSS правило ко второму селектору идущему СРАЗУ за первым -
.class1+.class2
/вместо классов могут быть любые из выше перечисленных селекторов - #id, teg и т.д./ - Селектор применяет CSS правило ко второму селектору идущему НЕ СРАЗУ за первым -
.class1~.class2
/вместо классов могут быть любые из выше перечисленных селекторов - #id, teg и т.д./
Селекторы по атрибуту:
- Селектор по атрибуту значение которого ПОЛНОСТЬЮ СОВПАДАЕТ -
input[type="text"] - Селектор по атрибуту значение которого НАЧИНАЕТСЯ на какое-то определённое слово -
input[name^="some-"]
/это может быть слог или подстрока/ - Селектор по атрибуту значение которого ЗАКАНЧИВАЕТСЯ на какое-то определённое слово -
a[href$=".pdf"]
/это может быть слог или подстрока/ - Селектор по атрибуту значение которого ВКЛЮЧАЕТ В СЕБЯ какие-то определённые символы, слог или подстроку -
p[class*="any"]- тегpв данном случае уточняющий, можно селектор писать без тега.
/это может быть слог или подстрока/ - Селектор по атрибуту значение которого включает в себя какое-то определённое слово -
.class[title~="Имя"]
/это должно быть именно слово целиком/ - Селектор по атрибуту объединяет 1 и 2 селекторы по атрибуту -
input[value|="двадцать-"]
/это должно быть слово целиком, или начинаться с этого слова и заканчиваться на знак"-"/
Селекторы по псевдоклассам (на примере тега li):
В случае если родительский тег содержит теги ОДНОГО типа:
-
li:nth-child(n)
Выберет n-ный элементliв списке - отсчитывая СВЕРХУ вниз по ходу чтения документа. -
li:nth-last-child(n)
Выберет n-ный элемент ли в списке - отсчитывая СНИЗУ вверх по ходу чтения документа. -
li:first-child
Выберет выберет ПЕРВЫЙ элемент внутри родительского тега. -
li:last-child
Выберет выберет ПОСЛЕДНИЙ элемент внутри родительского тега. -
li:only-child
Выберет элемент внутри родительского тега, если в родительском теге больше нет никаких элементов.
В случае если родительский тег содержит теги РАЗНОГО типа:
-
li:nth-of-type(n)
Выберет n-ный элемент ли в списке среди тегов типа li - отсчитывая СВЕРХУ вниз по ходу чтения документа. -
li:nth-last-of-type(n)
Выберет n-ный элемент ли в списке среди тегов типа li - отсчитывая СНИЗУ вверх по ходу чтения документа. -
li:first-of-type
Выберет выберет ПЕРВЫЙ элемент внутри родительского тега из заданного типа. -
li:last-of-type
Выберет выберет ПОСЛЕДНИЙ элемент внутри родительского тега из заданного типа. -
li:only-of-type
Выберет выберет элемент внутри родительского тега, если в родительском теге больше нет других элементов заданного типа. -
li:empty
Выбирает только те теги, у которых нет дочерних элементов (в том числе текстовых узлов). -
li:not(:first-child):not(:last-child):not(.someclass)
Выберет все теги li кроме первого, последнего и содержащего класс .someclass
Селекторы по атрибутам тега input:
-
input:enabled
Выберет все не заблокированные инпуты. -
input:disabled
Выберет все заблокированные инпуты. -
input:read-only
Выберет все поля, доступные только для чтения. -
input:read-write
Выберет все поля без атрибута readonly, даже если у них есть атрибут disabled, или type=“submit”. Может быть записать как not(:read-only). -
input:required
Выберет все поля, обязательные для заполнения. -
input:optional
Выберет все элементы, у которых НЕ указан атрибут required. -
input:checked
Выберет все элементы input с типами checkbox или radio, которые являются выбранными (отмеченными). -
input:valid
Выберет все элементы, у которых введенное значение удовлетворяет требованиям.Актуально для типов полей (email, url и др.) или специфических настроек (pattern, min/max и др.) -
input:invalid
Выберет все элементы, у которых введенное значение НЕ удовлетворяет требованиям.Актуально для типов полей (email, url и др.) или специфических настроек (pattern, min/max и др.) -
input:in-range
Выбирает все элементы, значение которых попадает в указанный диапазон. Актуально для типов полей с атрибутами min/max. -
input:out-of-range
Выбирает все элементы, значение которых НЕ попадает в указанный диапазон. Актуально для типов полей с атрибутами min/max.
Можно комбинировать данные селекторы, например input[type="text"]:optional, чтобы выбрать только текстовые поля, заполнение которых опционально.