Как применить css к определенному элементу

Селекторы CSS. Виды, группировка и специфичность

Александр Мальцев

В этом CSS правиле, p — это селектор , в данном случае — это селектор элемента . Это CSS правило устанавливает стили (CSS свойства, описанные в нём) для всех элементов p на странице.

В CSS очень много различных типов селекторов. Используя один из них или комбинацию из нескольких можно очень точно применить стили к нужным элементам.

Базовые селекторы

К базовым селекторам можно отнести селектор по классу, тегу, идентификатору, атрибуту и универсальный селектор.

Селектор по элементу (тегу)

Селектор по элементу предназначен для выбора элементов по имени тега.

Пример задания правила для всех элементов p на странице:

Селектор по классу

Селектор по классу предназначен для выбора элементов по классу (значению атрибута class ).

Пример задания правила для всех элементов, имеющих класс center :

Селектор по идентификатору (id)

Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id ).

Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer :

Универсальный селектор

Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.

Пример задания правила для всех элементов на странице:

CSS селекторы по атрибуту

Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.

Типы селекторов по атрибуту:

  • [attr] – по имени атрибута;
  • [attr=value] – по имени и значению атрибута;
  • [attr^=value] – по имени и значению, с которого оно должно начинаться;
  • [attr|=value] – по имени атрибута и его значению, которое равно value или начинается со value- ;
  • [attr$=value] – по имени атрибута и значению, на которое оно должно заканчиваться;
  • [attr*=value] – по указанному атрибуту и значению, которое должно содержать value ;
  • [attr
[attr&#93

Пример задания правила для всех элементов на странице, имеющих атрибут target :

[attr=value&#93

Пример задания правила для всех элементов на странице, имеющих атрибут rel со значением nofollow :

[attr^=value&#93

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого начинается с col :

[attr|=value&#93

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого равно test или начинается с test- (т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):

[attr$=value&#93

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого заканчивается на color :

[attr*=value&#93

Пример задания правила для всех элементов на странице, имеющих атрибут href , значение которого содержит подстроку youtu.be (например будет выбран элемент, если атрибут href у него равен https://youtu.be/TEOSuiNfUMA ):

Пример задания правила для всех элементов на странице, имеющих атрибут data-content , значение которого содержит news , отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football ):

Псевдоклассы

Псевдоклассы предназначены для более точного выбора элементов в зависимости от их динамического состояния или расположения. С помощью них можно, например, установить стили элементу при поднесении к нему курсора или стилизовать элемент в зависимости от того какой он имеет порядковый номер.

Псевдоклассы — это дополнение к основному селектору, которое позволяет выбрать элемент в зависимости от его особого состояния. Добавляется он к селектору c помощью символа : , т.е. так селектор:псевдокласс .

Псевдоклассы для выбора элементов в зависимости от их состояния

К этой группе псевдоклассов можно отнести псевдоклассы: :link , :visited , :hover , :active и :focus .

Псевдоклассы :link и :visited предназначены исключительно для ссылок (элементов a с атрибутом href ).

Псевдоклассы :hover , :active и :focus могут применяться не только к ссылкам, но и к другим элементам.

Псевдокласс :link

Псевдокласс :link предназначен для выбора не посещённых ссылок.

Пример задания правила для всех элементов a с классом external , которые пользователь ещё не посетил:

Псевдокласс :visited

Псевдокласс :visited предназначен для выбора посещённых ссылок.

Пример задания правила для всех элементов a , расположенных в .aside , пользователь которые уже посетил:

Псевдокласс :active

Псевдокласс :active предназначен для выбора элементов в момент когда они активируются пользователем. Например, когда пользователь нажал левой кнопкой мышкой на ссылку, но её ещё не отпустил. В основном данный класс применяется для ссылок ( a ) и кнопок ( button ), но может также использоваться и для других элементов.

Пример задания CSS правила для всех элементов a когда они активируются пользователем:

Псевдокласс :hover

Псевдокласс :hover предназначен для выбора элементов при поднесении к ним курсора (при наведении на них).

Пример задания CSS правила для всех элементов .btn-warning при поднесении к ним курсора:

При задании CSS-правил для ссылок с использованием псведоклассов :link , :visited , :hover и :active , их следует распологать в следеующем порядке:

Если CSS-правила расположить в другом порядке, то часть из них могут не работать.

Псевдокласс :focus

Предназначен для выбора элемента, который в данный момент находится в фокусе. Например, данное состояние может активироваться когда мы кликаем мышью в текстовое поле или переходим в него с помощью клавиши tab на клавиатуре.

Пример задания CSS правила для элемента input[type="text"] при нахождении его в фокусе:

По расположению среди соседей

При выборе элементов можно дополнительно с помощью псевдоклассов задать условие (фильтр) по их расположению (порядковому номеру) в родителе.

Псевдоклассы, предназначенные для этого: :first-child , :last-child , :only-child , :nth-child(выражение) , :nth-last-child(выражение) .

Псевдокласс :first-child

Псевдокласс :first-child применяется для выбора элементов, которые являются первыми дочерними элементами своего родителя.

Пример задания CSS правила для элементов li являющимися первыми дочерними элементами своего родителя:

Псевдокласс :last-child

Псевдокласс :last-child применяется для выбора элементов, которые являются последними дочерними элементами своего родителя.

Пример задания CSS правила для элементов .alert-warning , которые являются последними дочерними элементами своего родителя:

Псевдокласс :only-child

Псевдокласс :only-child используется для выбора элементов, если они являются единственными дочерними элементами внутри родительского контейнера.

Селектор h2:only-child выберет все элементы h2 , если они являются единственными дочерними элементами своего родителя.

Действие аналогичное :only-child можно выполнить с помощью псевдоклассов :first-child и :last-child . Например селектор h2:only-child можно ещё реализовать так: h2:last-child:first-child .

Псевдокласс :nth-child(выражение)

Псевдокласс :nth-child() применяется для выбора элементов по их порядковому номеру в родителе. В качестве выражения можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.

Формула имеет следующую запись: An + B . A и B — это числа, а n — счетчик, принимающий целые значения, начиная с 0 (т.е. 0, 1, 2, 3 . ).

Например, формула вида 3n + 2 будет определять элементы с порядковыми номерами (2, 5, 8, . ). Т.е. 3 * 0 + 2 , 3 * 1 + 2 , 3 * 2 + 2 , .

А например, формула вида 5n будет определять элементы с порядковыми номерами (0, 5, 10, . ). Т.е. 5 * 0 , 5 * 1 , 5 * 2 , .

Псевдокласс :nth-last-child(выражение)

Псевдокласс :nth-last-child() выполняет те же действия что и :nth-child() за исключением того, что отсчет элементов в родителе вёдется не с начала, а с конца. В псведоклассе :nth-last-child(выражение) в качестве выражения можно использовать те же вещи, т.е. число, формулу, или ключевые слова odd или even

По расположению среди соседей с учётом типа элемента

В CSS имеются псевдоклассы аналогичные :first-child , :last-child и т.д. Они отличаются от них только тем, что выполняют это с учётом типа элемента.

Список псевдоклассов, предназначенных для этого: :first-of-type , :last-of-type , :only-of-type , :nth-of-type(выражение) , :nth-last-of-type(выражение) .

Псевдокласс :first-of-type

Данный псевдокласс очень похож на :first-child , но в отличие от него он выбирает не просто первый элемент, а первый элемент своего родителя с учётом его типа .

Например, выберем все элементы p , которые являются первыми элементами указанного типа у своего родителя:

При использовании селектора p:first-child , не один элемент p не был выбран, т.к. не один из них не является первым дочерним элементом своего родителя.

Псевдокласс :last-of-type

Данный псевдокласс предназначен для выбора элементов, которые являются последними дочерними элементами данного типа своего родителя.

Псевдокласс :only-of-type

Псевдокласс :only-of-type применяется для выбора элементов, если каждый из них являются единственным дочерним элементом данного типа внутри своего родителя. В отличие от :only-child псведокласс :only-of-type работает аналогично, но с учётом типом элемента.

В этом примере стили будут применены к элементам p , которые являются единственным элементом p внутри своего родителя.

Псевдокласс :nth-of-type(выражение)

Данный псевдокласс предназначен для выбора элементов по их порядковому номеру в родителе с учетом их типа.

Псевдокласс :nth-of-type(выражение) похож на :nth-child(выражение) с разницей лишь а том, что он учитывает тип элемента. В качестве выражения также можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.

Селектор p:nth-child(2) выберет второй по счёту элемент, если он является p , а селектор p:nth-of-type(2) веберет второй дочерний элемент p среди дочерних p .

Псевдокласс :nth-last-of-type(выражение)

Псевдокласс :nth-last-of-type(выражение) аналогичен классу :nth-of-type(выражение) с разницей в том, что отсчёт дочерних элементов ведётся с конца.

Псевдоклассы для элементов форм

К этой группе можно отнести псевдоклассы :enabled , :disabled и :checked .

Псевдоклассы этой группы, а также :hover , :active и :focus ещё называют событийными селекторами, т.к. они позволяют применить стили при наступлении определённых событий.

Псевдокласс :checked

Псевдокласс :checked предназначен для выбора элементов radio , checkbox и option внутри select , которые находятся во включенном состоянии.

В этом примере фон элемента label при отмеченном checkbox выделяется цветом. Выбор включенного чекбокса выполняется с помощью псевдокласса :checked .

Псевдокласс :enabled

Псевдокласс :enabled предназначен для выбора включенных элементов формы, с которыми пользователь может взаимодействовать, например, нажать на него или внести текст.

Пример, в котором установим для всех включенных элементов input фон:

Псевдокласс :disabled

Элементы формы могут кроме включенного состояния находиться ещё в отключенном.

Псевдокласс :disabled предназначен для выбора отключенных элементов формы, т.е. элементов с которыми пользователь в данный момент не может взаимодействовать.

Например, выберем все отключенные элементы input :

Остальные псевдоклассы

Псевдокласс :not(селектор)

Псевдокласс :not() предназначен для выбора элементов, которые не содержат указанный селектор.

В качестве селектора можно указывать селекторы по тегам, классам, атрибутам, использовать псевдоклассы, т.е. всё кроме псведокласса :not() , несколько сгруппированных селекторов, псевдоэлементы, дочерние и вложенные селекторы:

При необходимости можно использовать несколько псевдоклассов :not() .

Пример CSS селектора для выбора элементов, которые не содержат некоторый класс:

Псевдокласс :empty

Псевдокласс :empty предназначен для выбора пустых элементов (т.е. элементов, у которых нет дочерних узлов, в том числе текстовых).

Селектор div:empty выберет все пустые элементы div на странице.

Псевдокласс :root

Псевдокласс :root предназначен для выбора корневого элемента документа. В HTML документе данным элементом является <html> . В отличие от селектора по тегу html данный псевдокласс имеет более высокий приоритет.

Применять :root можно например для объявления CSS переменных:

Псевдокласс :target

Псевдокласс :target предназначен для выбора элемента, идентификатор которого соответствует хэшу в URL-адресе.

В этом примере стили будут применены к элементу с id="header-1" , если хэш URL страницы будет равен #header-1 . Если же хэш будет равен #header-2 , то псевдокласс :target соответственно выберет элемент с id="header-2" и стили уже будут применены к нему.

Группировка селекторов

Для задания правил нескольким селекторам одновременно их необходимо перечислить через запятую.

Синтаксис: селектор1, селектор2, .

Пример задания правила для всех элементов h3 и h4 на странице:

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

В CSS селекторы можно комбинировать. Осуществляется это очень просто, посредством последовательного их записывания, без использования пробела.

Пример селектора для выбора элементов, которые имеют одновременно два класса:

Пример селектора для выбора элементов, которые имеют указанный класс, атрибут, и является первым дочерним элементом в своём родителе:

Селекторы отношений

В HTML документе каждый элемент всегда связан с другими элементами.

Виды отношений между HTML элементами:

  • родитель – элемент, непосредственно в котором находится рассматриваемый элемент;
  • предок – это элемент, который расположен на одном из уровней иерархии элементов, до которого можно дойти двигаясь от рассматриваемого элемента к его родителю, от его родителя к родителю его родителя и т.д.
  • дети – это элементы, непосредственно расположенные в текущем рассматриваемом элементе;
  • потомки (дочерние элементы) – это любые элементы, которые находятся в текущем элементе вне зависимости от уровня иерархии, в котором они расположены;
  • соседи (сиблинги) – это элементы, расположенные на том же уровне вложенности (иерархии), что и рассматриваемый элемент; или другими словами — это все другие элементы, которые имеют того же родителя что и текущий рассматриваемый элемент.

Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.

Виды отношений между HTML элементами

В CSS имеется 4 вида селекторов отношений.

Первые два из них X Y и X > Y относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других.

Остальные два X + Y и X

Y являются CSS селекторами для выбора соседних элементов.

Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак > (больше), знак + и

Селектор X Y (для выбора вложенных или дочерних элементов)

Селектор X Y (предок потомки) предназначен для выбора элементов Y , находящихся в X .

Другими словами, селектор X Y предназначен для выбора элементов Y , являющихся потомками элементов определяемым селектором X .

Селекторы X Y называют контекстными или вложенными.

Например, селектор дочерних элементов div p выберет все элементы p , расположенные в div .

Селектор X > Y

Селектор X > Y (родитель > дети) предназначен для выбора элементов, определяемым селектором Y непосредственно расположенных в элементе, определяемым селектором X .

По другому можно сказать, что селектор X > Y предназначен для выбора Y , у которых родителем является элемент, определяемым X .

Например, комбинация селекторов li > ul выберет все элементы ul , которые непосредственно расположены в li .

Селектор X + Y

Селектор X + Y предназначен для выбора элементов Y , каждый из которых расположен сразу же после X . Элементы определяемым селектором X и Y должны находиться на одном уровне вложенности, т.е. быть по отношению друг к другу соседями (сиблингами).

Например, комбинация селекторов input + label выберет все элементы label , которые расположены сразу же за элементом input , и являющиеся друг по отношению к другу соседями (сиблингами).

Селектор X

Y предназначен для выбора элементов Y , которые расположены после X . При этом элементы, определяемые селектором X и Y , должны являться по отношению друг к другу соседями (сиблингами).

span выберет все элементы span , расположенные после элемента p на том же уровне вложенности.

Приоритет селекторов

Когда в CSS имеется несколько правил, устанавливающих одно и тоже CSS свойство некоторому элементу, приоритетным из них является то, в котором селектор имеет большую специфичность (вес).

Специфичность селекторов удобно представлять в виде 4 чисел: 0,0,0,0 .

При этом сравнение селекторов по весу нужно выполнять слева направо. Если первая цифра одного селектора больше, чем у другого, то он является более специфичным и к элементу будет применяться CSS-свойство, заданное в нём. Если цифры равны, то выполняем сравнение следующих цифр селекторов и т.д.

Если у сравниваемых селекторов все цифры равны, то будет применяться тот, который ниже из них расположен по коду.

Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:

  • универсальный селектор (не добавляет вес) – 0,0,0,0 ;
  • селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – 0,0,0,1 ;
  • селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – 0,0,1,0 ;
  • селектор по идентификатору добавляют единичку ко второй цифре – 0,1,0,0 ;

Стили, расположенные в атрибуте style элемента, являются более специфичными по сравнению с селекторами. Вес этих стилей определяется единицей в первой цифре – 1,0,0,0 .

  • * – 0,0,0,0 ;
  • li – 0,0,0,1 ;
  • li::before – 0,0,0,2 ;
  • ul > li – 0,0,0,2 ;
  • div input+label – 0,0,0,3 ;
  • h1 + div&#91;data-target&#93; – 0,0,1,2 ;
  • .btn.show – 0,0,2,0 ;
  • ul li a.item – 0,0,1,3 ;
  • #aside div.show – 0,1,1,1 ;
  • style=". " – 1,0,0,0 ;

Повысить важность определённого CSS свойства можно с помощью ключевого слова !important . В этом случае будет использоваться именно данное CSS-свойство.

В этом примере элементу будет установлен тот фон к которому добавлено слово !important . !important перебивает любой вес.

Интересный случай, когда нужно определить какое значение CSS-свойства будет применено к элементу, если !important добавлено к нескольким из них.

В этом случае будет применено то значение CSS-свойства c !important у которого больше вес селектора.

К примеру, если добавить !important к CSS-свойству расположенному в style , то получим максимальную возможную специфичность, которую уже никак не перебьёшь.

В этом примере к элементу #message будет применено CSS-свойство font-size со значением 20px, т.к. хоть у каждого из них имеется состояние !importants , но специфичность style ( 1,0,0,0 ) больше чем у селектора p#message ( 0,1,0,1 ).

Каких селекторов нет в CSS

В CSS нет селектора для получения родительского элемента. Этот селектор может появиться в новой спецификации CSS, но в CSS3 так выбрать элемент нельзя.

Селекторы CSS

В CSS-селекторы используются для стилизации HTML элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.

Необходимые знания: Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS).
Цель: Узнать, как работают CSS-селекторы.

Что такое селекторы?

Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.

Some code with the h1 highlighted.

Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special .

В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в Спецификации селекторов 3 уровня, где вы сможете найти всю информацию о поддержке селекторов в браузерах.

Несколько селекторов

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special ; я могу написать их так:

А могу написать короче — просто отделив селекторы запятыми:

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

Но если мы объединим селекторы, правило не применится ни к h1 , ни к классу: оно считается недействительным.

Типы селекторов

Понимание того, какой именно селектор вам нужен, очень помогает подобрать подходящий элемент. Сейчас мы разберём разные виды селекторов.

Селекторы тегов, классов и идентификаторов

К этой группе относятся селекторы HTML-элементов, таких как <h1> .

К группе относятся и селекторы классов:

или селекторы идентификаторов (ID):

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

Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:

или основываясь на значении атрибута:

Псевдоклассы, псевдоэлементы

К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover , например, применяет правило, только если на элемент наведён курсор мыши

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.

Комбинаторы

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов ( > ):

Продолжение

Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут селекторы тегов, классов и идентификаторов.

Справка о селекторах

В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.

Список всех Селекторов в CSS

В этой статье я постараюсь понятно объяснить что такое CSS селекторы и как использовать каждый из них. Здесь описаны все селекторы, которые нужно знать при работе с CSS.

CSS селектор — это то что позволяет выбирать нужный элемент в HTML документе, чтобы потом применить к этому элементу CSS стили (полный список CSS стилей).

  • CSS селекторы (список)
  • Описание CSS селекторов
  • *
  • .class
  • #id
  • tag
  • X, Y
  • X Y
  • Х > Y
  • Х

CSS селекторы (список)

Селектор Пример Описание примера
* * Все элементы.
#id #firstname Элемент с id="firstname" .
.class .intro Все элементы с class="intro" .
.class1.class2 .name1.name2 Все элементы с class="name1 name2" .
.class1 .class2 .name1 .name2 Все элементы с class="name2" у которых родитель с class="name1" .
tag p Все <p> элементы.
tag.class p.intro Все <p> элементы с class="intro" .
tag, tag div, p Все <div> и все <p> элементы.
tag tag div p Все <p> внутри всех <div> .
tag > tag div > p Все <p> прямой родитель которых <div> .
tag + tag div + p <p> который находятся сразу после <div> .
tag

Описание CSS селекторов

Выбирает абсолютно все элементы. Например, такой код обнуляет внутренние и внешние отступы у всех элементов на странице:

* можно использовать в связке с другими селекторами. Например, выделим все дочерние элементы #container сплошной черной рамкой шириной 1px.

* создает повышенную нагрузку на скорость работы браузера, поэтому используйте его только по необходимости.

.class

Выбирает элемент у которого есть атрибут class с указанным значением: class="myclass" .

Название класса, может состоять из латинских букв ( a-zA-Z ), цифр ( 0-9 ), символа дефиса и подчеркивания ( — _ ).

Следующий код устанавливает красный цвет текста для всех элементов с классом error —

У одного элемента может быть несколько классов (через пробел): <div > .

Выбирает элемент у которого есть атрибут id с указанным значением: id="myid" .

Идентификатор может быть присвоен только одному элементу на странице (если присвоить несколько, то мир не рухнет, но так делать не принято).

Идентификатор должен состоять из латинских букв ( a-zA-Z ), цифр ( 0-9 ), символа дефиса или подчеркивания: — _ . Начинается он только с буквы!

Следующий код устанавливает ширину и отступ элемента с идентификатором:

Селектор по ID имеет больший приоритет над селектором по классу (см. начало статьи). Поэтому по возможности используйте селекторы класса, это считается правилом хорошего тона и позволит при необходимости без лишних усилий "перебить" стили.

Селектор HTML тега. Применяться ко всем указанным элементам в документе. Часто используется для задания цвета, фона, шрифта и др.

Следующий код задает цвет текста для всех ссылок и отступы для UL списков:

Объединяет несколько селекторов, так чтобы указать всем выбранным селекторам одинаковые стили.

Следующий код задает цвет текста для заголовков h2 и ссылок в теге LI:

Выбирает элементы Y, которые являются дочерними к X. Может состоять из нескольких селекторов: X Y Z . Сначала обязательно указывается родитель, а после него дочерние элементы. Их количество может быть любым. Свойства стилей будут применены только к последнему элементу.

Например, следующий код выбирает любой элемент <а>, являющийся потомком элемента <li>: ( <li><a href="ссылка">текст</a></li> ):

Это правило можно сочетать с идентификаторами и классами: body.opera a < color:blue; >.

Выбирает элементы Y, которые являются дочерними к X. Выбирается только первый уровень дочерних элементов.

Добавит отступ для li первого уровня, т.е. тех который является прямым потомком элемента ul :

Это правило не коснется <ul > .

Выбирает все элементы Y, которые расположены после X (на том же уровне). По поведению похож на X + Y . Разница в том, что будут выбраны все следующие элементы, а не только первый.

Например, в указанном коде будут выбраны все элементы p , которые расположены после div :

Окрасит "текст 2" и "текст 3":

Выбирает первый элемент Y, который находится после X (не вложен, а рядом). Стили будут применяться только к последнему элементу X.

Например, следующий код устанавливает красный цвет текста в абзаце p , который расположен сразу после div :

a:link, a:visited, a:hover, a:active, a:focus

Выбирает элементы (обычно это поля формы или ссылки) в зависимости от их состояния.

  • a:link — выбирает обычную (не посещенную) ссылку. Обычно этот селектор записывается просто как a .
  • a:visited — выбирает уже посещенную ссылку.
  • a:hover — выбирает ссылку на которую наведена мышка (под курсором).
  • a:active — выбирает активную ссылку (на которую был сделан клик, пока еще никуда не кликали или когда на ссылку переключились при передвижении табом с клавиатуры).
  • a:focus — выбирает активную ссылку (на которую кликнули, но еще не отпустили кнопку мышки).

Выбирает элементы, которые содержат указанный атрибут. Селектор атрибутов.

Окрасит только "текст":

[attr = value]

Выбирает элементы, у которых есть атрибут с указанным значением. Селектор атрибутов с точным значением.

Окрасит только "текст":

[attr *= value]

Выбирает элементы, у которых в значении указанного атрибута встречается указанная подстрока. Селектор атрибутов с плавающим значением.

Окрасит "текст" и "текст 2":

[attr ^= value]

Выбирает элементы, у которых значение атрибута начинается с указанной строки. Селектор атрибутов со значением в начале.

Установит фоновую картинку только для "текст":

[attr $= value]

Выбирает элементы, у которых значение атрибута заканчивается на указанную строку. Селектор атрибутов со значением в конце.

Например, выберем элементы, которые ссылаются на файлы определенного расширения.

Выберет ссылки a , ссылающиеся на изображения формата .jpg . Окрасит только "текст":

Выбирает элементы, у которых в значении атрибута есть указанное слово. Селектор атрибутов с одним из значений разделенных пробелом.

Он чем-то похож на *= , разница вот в чем:

    *= — ищет home в любом месте значения. Найдет homeland .

Об этом селекторе не многие знают, а ведь он иногда очень удобен.

[attr |= value]

Выбирает элементы, у которых значение атрибута равно указанной строке или начинается с неё.

Пример: [lang |= ru] — элементы с атрибутом lang, значение которого равно ru или начинается с ru- , например "ru-RU". Но он практически не используется и его заменяет комбинация: [lang = ru], [lang ^= ru-] .

:target

Выделяет активный якорь в HTML. Допустим у нас ссылка ссылается на внутренний якорь <a href="#anchor"> на странице, тогда при клике по этой ссылке этот селектор выделить элемент имеющий атрибут id="anchor" .

:checked

Стилизует выбранные radio / checkbox. Может использоваться с тегом input или option или без них: input:checked , option:checked или :checked .

Например, следующий код выделяет сплошной черной рамкой в 1px область возле включенного флажка:

:default

Выбирает элемент формы, который считается элементом по умолчанию. Работает с тегами <button> , <input> , <option> .

<option> считается дефолтным ( :default ), если это элемент с атрибутом selected или первый enabled (NOT disabled) элемент по порядку DOM элементов. Для <select multiple> каждый selected элемент будет считаться дефолтным.

<input type="checkbox"> и <input type="radio"> считаются дефолтными, если они выбраны (имеют атрибут checked ).

:disabled

Выбирает любой disabled (отключенный) элемент.

Элемент считается отключенным, когда с ним нельзя взаимодействовать (выбрать, кликнуть, сфокусироваться, вписать что-либо и т.д.). Если элемент не disabled , то на нём по-умолчанию установлен статус enabled .

Примеры

Установим цвет фона для всех отключенных полей формы с типом text : <input type="text"> :

Установим цвет фона элементов <select disabled> — все отключенные элементы SELECT с классом COUNTRY:

:enabled

Выбирает включенный (активный) элемент.

Элемент считается включён, когда с ним можно взаимодействовать (выбрать, кликнуть, сфокусироваться, вписать что-либо и т.д.). enabled включенными элементами считаются все не disabled элементы.

Примеры

Установим белый цвет фона для всех активных (enabled) элементов <input> и серый для всех неактивных (disabled):

:empty

Выбирает любой пустой элемент. Пустой значит в нём не должно быть ничего (ни одной node): ни пробелов, ни текста, ни других элементов. HTML комментарии, CSS код не повлияют на то что элемент будет считать не пустой.

::before

X::before добавляет псевдо-элемент в начало X (внутрь тега). Работает вместе со свойством X::before < content:» >, которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое ( content:» ), т.к. элемент должен хоть что-то содержать.

Например с помощью таких стилей, можно указать значок для LI списка:

  • элемент 1
  • элемент 2

Когда-то все браузеры реализовали эти псевдо-элементы с одним двоеточием: :after :before . Но стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. Для IE8 нужно по-прежнему одно.

::after

X:after добавляет псевдо-элемент в конец X (внутрь тега). Работать только совместно со свойством X::after < content:» >, которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое ( content:» ), т.к. элемент должен хоть что-то содержать.

Например с помощью таких стилей, можно создать блок который будет очищать все вышестоящие обтекающие элементы. Частый прием в верстке:

:focus

Выбирает активный HTML элемент, тот который находится в фокусе. Обычно применяется к элементам формы. Может применяться к любым элементам переключение на которые возможно с клавиатуры или которые предназначены для пользовательского ввода данных.

В этом примере при перемещении курсора в поле <input type="text"> его фон будет изменен на желтый:

В этом примере стили применяться к любой ссылке <a> на которую был сдела клик:

В этом примере при перемещении курсора в поле <input type="text"> его ширина будет постепенно увеличиваться со 100 до 250 пикселей:

:focus-visible

Применяется, когда элемент соответствует псевдоклассу :focus и браузер считает, что фокус должен быть очевиден на элементе.

Например, фокус при нажатии мышкой не должен быть очевидным, а вот при переходе табом с клавиатуры должен быть очевидным — в этом случае сработает этот псевдо-селектор.

:focus-within

Выбирает элемент, если этот элемент или любой из его потомков сфокусирован. Другими словами, он представляет элемент, который сам соответствует псевдоклассу :focus или имеет потомка, который соответствует :focus . (включает потомков в теневых деревьях).

Этот селектор полезен, например, для выделения всего контейнера <form> , когда пользователь фокусируется на одном из его полей <input> .

Этот пример Выбирает <div> , когда фокусируется один из его потомков:

Еще пример с формой:

:hover

Срабатывает при наведении мышки на элемент, когда курсор над элементом. Может применяться для любых элементов ( div, span ) не только ссылок <a> .

В следующем примере при наведении мышкой под ссылкой будет появляться черная линия толщиной 1px (замена свойству underline):

В следующем коде показано изменение цвета фона при наведении на элемент <div> :

:not(selector)

Выбирает элементы, которые не содержат указанного селектора. Вместо "selector" может быть любой селектор, кроме псевдо-элементов ( :first-letter ). Двойное отрицание запрещено: :not(:not(. )) .

Следующий код выбирает для стилизации все элементы, кроме элемента p :

В этом примере выбираются все элементы li , у которых нет класса .last :

Выберет "элемент 1" и "элемент 2":

::first-line, ::first-letter

  • ::first-line стилизует начальную (первую) строку.
  • ::first-letter стилизует начальную (первую) букву. Изменяются только шрифт, цвет текста, фон и т.д. привязан к множеству параметров: ширина окна браузера, язык, шрифт и т.п.

Эти селекторы принято записывать с двойным двоеточием ::first-line , но можно и с одним :first-line .

#1 Выбираем первую букву в параграфе

Применит указанные стили для всех начальных букв всех абзацев в документе.

#2 Выбираем первую строку в абзаце

Применит указанные стили для всех начальных строк всех абзацев в документе.

:nth-child(n)

X:nth-child(n) выбирает каждый "n-ый" элемент Х, который находится на одном уровне с X. Считает все элементы на уровне X (неважно какой у элемента тег, т.е. любой тип, а не только тип X). Под типом подразумевается именно тег элемента (div, span, li), а не его класс или что-то еще.

Заметка: Есть такой же селектор :nth-of-type(n) разница между ними в том, что X:nth-child(n) считает все элементы на одном уровне, не важно какой тип указан в Х, а Х:nth-of-type(n) считает только элементы типа Х находящиеся на одном уровне. Например:

  • odd — нечетные.
  • even — четные.
  • число — порядковый номер с 1.
  • выражение с n an+b — a и b целые числа, n — счетчик от 0 до 999.
n = odd / even

Раскрасим четные и нечетные параграфы в разные цвета:

n = число

Установит красным цветом второй элемент:

Окрасит "Второй параграф.":

n = выражение

Формула выражения: an + b . Где a — это число, которое будет умножаться на n , n — это счетчик от 0-999, b — это число, отступ.

  • в селекторе :nth-child(2) указана только "а".
  • :nth-child(odd) можно заменить на :nth-child(2n+1) — 1, 3, 5, 7 .
  • :nth-child(even) можно заменить на :nth-child(2n) — 2, 4, 6, 8 .
  • :nth-child(3n+4) — 4, 7, 10, 13 .
  • :first-child можно заменить на :nth-child(0n+1) или :nth-child(1)
Обратимся к каждому третьему элементу на текущем уровне, где расположены p:

:nth-last-child(n)

Выбирает начиная с конца. Работает точно также как и :nth-child(n) только отсчет идет не сверху, а снизу.

  • odd — нечетные.
  • even — четные.
  • число — порядковый номер с 1.
  • выражение с n an+b — a и b целые числа, n — счетчик от 0 до 999.
Следующий код установит красным цветом второй с конца параграф:

Окрасит "Второй параграф.":

Еще примеры смотрите в предыдущем селекторе :nth-child(n) .

:nth-of-type(n)

Выбирает элемент по номеру указанному в "n". X:nth-of-type начинает отсчет от первого элемента типа X находящегося на одном уровне. Под типом подразумевается именно тег элемента (div, span, li), а не его класс.

Заметка: есть такой же селектор :nth-child(n) разница между ними в том, что X:nth-of-type(n) выберет только элементы типа Х находящиеся на одном уровне, а X:nth-child(n) считает все элементы всех типов на одном уровне, не важно какой тип указан в Х. Например:

  • odd — нечетные.
  • even — четные.
  • число — порядковый номер с 1.
  • выражение с n an+b — a и b целые числа, n — счетчик от 0 до 999.
#1 n = add / even

Раскрасим четные и нечетные параграфы в разные цвета. Считает именно параграфы без h1, как это делает :nth-child :

#2 n = число

Установит красным цветом второй элемент:

Окрасит "Второй параграф.":

#3 n = выражение

Формула выражения: an + b , где "a" — число, которое будет умножаться на n, "n" — счетчик от 0-999, "b" — число, отступ.

  • в селекторе :nth-of-type(2) указана только "а".
  • :nth-of-type(odd) можно заменить на :nth-of-type(2n+1) — 2, 4, 6, 8 .
  • :nth-of-type(even) можно заменить на :nth-of-type(2n) — 1, 3, 5, 7 .
  • :nth-of-type(3n+4) — 4, 7, 10, 13 .
  • :first-of-type можно заменить на :nth-of-type(0n+1) или просто :nth-of-type(1)

Например: обратимся к каждому третьему элементу p на текущем уровне, где расположены p:

:nth-last-of-type(n)

Выбирает элемент по номеру указанному в n . X:nth-last-of-type(n) Начинает отсчет от последнего элемента X находящегося на одном уровне.

Это такой же селектор как и :nth-of-type(n) только считает наоборот — с конца.

Например: обратимся к каждому третьему элементу p с конца, на текущем уровне, где расположены p :

Еще примеры смотрите в предыдущем селекторе :nth-of-type(n) .

:first-child

X:first-child Выбирает первый элемент который находится на одном уровне с Х. Отсчет начинается с любого элемента не обязательно Х.

X:first-child это тоже самое что X:nth-child(1)

#1 Пример: обратимся к первому элементу в блоке #container

А вот так не выделит ничего:

#2 Обнуление границы

:first-child иногда используется для обнуления свойства border на граничных элементах списка. Следущий код обнулит значение верхней границы элемента li , являющимся дочерним по отношению к элементу ul .

:last-child

X:last-child Выбирает первый с конца элемент который находится на одном уровне с Х. Отсчет начинается с любого элемента не обязательно X.

X:last-child это тоже самое что X:nth-last-child(1)

#1 Пример: обратимся к первому с конца элементу в блоке #container

А вот так ничего не выделит:

#2 Покрасим последний элемент li в списке ul в зеленый:

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

Выбирает первый / последний элемент с таким же тегом что и X, который находится на одном уровне с X. Считает только теги X .

X:first-of-type это тоже самое что X:nth-of-type(1)

#1 Пример: обратимся к первому элементу div в блоке #container
#2 Обнуление границы

:first-of-type часто используется для обнуления свойства border на граничных элементах списка:

:only-child

X:only-child Выбирает элемент X, который единственный на уровне X. При подсчете элементов название тега X НЕ учитывается.

Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов (неважно какой тип) равно 1.

Выберем элемент, если он единственный в блоке:

:not(:only-child)

:only-child с отрицанием :not() — это комбинация двух псевдо-селекторов.

Это может пригодится, чтобы выбрать все элементы блока только в том случае, если в этом блоке больше чем один элемент.

В результате если у нас один элемент он НЕ будет выбран:

А если больше одного, то будут выбраны все:

:only-of-type

X:only-of-type Выбирает элемент X, который единственный на уровне X (не имеет соседей). При подсчете элементов учитывается название тега X.

Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов типа X равно 1.

#1 Выберем ul только с одним элементом в списке.

Другой вариант: можно ul > li:only-child , потому что обычно в списках ul находятся только li теги.

Немного практики

#1 Сложное выделение

У нас есть такой код:

Как обратиться к "Список 2"?

Решение 1

Код находит первый список, затем находит его прямого наследника и у которого порядковый номер в списке равен 2.

Решение 2

Использование соседних селекторов.

Браузер находит ul, следующий сразу за p, затем находит его последний дочерний элемент.

Решение 3

Это решение пожалуй самое правильное, потому что если между ul или li попадут другие теги, этот пример все равно будет выбирать нужный нам li:

Браузер выбирает первый ul (именно ul), затем находит первый с конца элемент li (именно li).

Наглядное пособие по селекторам типа :nth-child

Чтобы быстро и точно понять как работают псевдо-селекторы типа :first-child . Я создал спец. страницу. Там же можно подобрать нужный для себя селектор этого типа, под конкретную задачу.

Считаем элементы в блоке с помощью nth-child

Полезная статья на Хабре — количественные CSS селекторы, учит считать элементы с помощью nth-child . Например, нужно выделить первый элемент, только, если в блоке 6 элементов указанного типа. Или, нужно выделить все элементы блока, если в блоке всего 6 элементов.

Выбор диапазона элементов

Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

Спасибо за статью. В моем понимании :first-child и :first-of-type отличаются не намного, но отличаются. К примеру:

думаю необходим когда на одном уровне есть элементы с одним классом, а выбрать нужно именно первый элемент i с классом .name

Есть два селектора — one и two, сначала идёт one потом two, как сделать функцию x + y — наоборот, что бы при one + two стиль привязывался не к two а к one?

По-моему никак (уверен на 99%). В CSS нельзя привязать стили к предыдущему селектору в правиле. Я такого ни разу не видел. Мне иногда этого очень не хватало — это вообще открыло бы кучу возможностей.

Рад помочь. Кстати, месяц назад наткнулся на эту статью, очень крутая справка, шикарная я бы сказал. Зашёл и поглядел — не надо нигде искать по пунктикам.

Пока пробежал её глазами, чуть по чуть на практике повторяю все пункты. Возник вопрос, осуществимо ли это. К примеру, есть структура:

Как мне управлять картинками только с помощью псевдоклассами? Немного поясню. На это месте может быть не картинка, а параграф или div. К примеру, я пытался через nth-child(n), что то типа:

Ничего не вышло, где-то косячу!

:nth-child ищет элементы на одном уровне, а тут они вложены. Надо так:

Между контейнерами могут быть другие элементы (не div) с другими классами, чтобы они не мешались лучше использовать :nth-of-type . В принципе ничего не теряем:

То что нужно, спасибо большое Что-то вёрстка сложнее дается, чем программирование. С меня пиво или кефир, по желанию!

А в CSS есть что-нибудь типа копирования? Сейчас изучаю bootstrap, натягиваю на WP. Чтобы изначальный фреймворк не редактировать, я его переопределяю в style.css. Можно как-то классы копировать, что-то типа:

Ну а потом работать со своим классом

Нет в CSS нельзя. Во всяких SASS LESS можно.

Не могу понять различия между методами Х

У и Х+У . По примерам — это одно и тоже.

Х+У
Выбирает первый элемент Y, который находится после X.

У
Выбирает все элементы Y, которые расположены после X.

Что тут не понятно?

Извините, ошибся при написании. Х

У и Х>У имел в виду.

Изменил описание, на такое:

Выбирает элементы Y, которые являются дочерними к X, но выбирается только первый уровень дочерних элементов.

Так вроде понятнее, чем было.

Спасибо, да, так понятнее. Получается, в Х

Я правильно понял?

Подскажите, а можно ли решить такую проблему селекторами. Нужно выбрать каждую 3 картинку внутри слоя, но проблема в том, что картинки обернуты ссылками и уже дочерними не являются.

Это просто делается:

Хочется остановиться на двух моментах пока что:

1) Сначала не работал :last-child внутри <body> , оказалось, что даже если добавить <script> после вот так:

то считается, что <script> все равно находится внутри <body>
Как бы логично, но как бы не совсем очевидно, если искать проблему в другом месте. Может кому будет полезным. Джессика опять ты меня подвела.

2) На счет селектора псевдоклассов :not (отрицающий селектор?)
Из примера выше:

Например, следующий код выбирает для стилизации все элементы, кроме элемента p:

Это не работает (не поленился — проверил).

Как я понимаю для отрицания, нужно чтобы элементы находились на одном уровне)

А в записи выше используется селектор * который выбирает все элементы страницы, в том числе и <body> . Далее проверяется есть ли на одном уровне с <body> элементы <p> . И если таковые есть, к ним бы не применялся стилевой параметр(свойство) color .

Однако таковых нет, поскольку <p> является дочерним элементом . В следствие этого весь документ будет "написан" зеленым шрифтом. Поскольку color наследуемый параметр.

Поэтому, если мы действительно хотим выделить все элементы на странице кроме абзацев (а мы вроде как хотим), то следует писать так:
body :not(p)
и не забываем про пробел между body и :not (иначе опять будет проверять на одном уровне с body)

Ну и само собой, "вложенность" не поддерживается.. вроде бы -)

Поправьте, если я не прав. Я только учусь

Это не работает (не поленился — проверил).

Как я понимаю для отрицания, нужно чтобы элементы находились на одном уровне)

Это не так, зависит от предыдущего селектора

Вот на одном уровне.

и не забываем про пробел между body и :not

Это вообще не корректная запись, насколько я знаю :not() должен относиться к чему-то, но не к пробелу.

Вы правы, но не совсем, то что вы говорите это каскадность, когда одно накладывается на другое и при создании селекторов, особенно при использовании * это нужно продумывать. Обычно указываются конкретные селекторы: классов или тегов и таких накладок не возникает. У меня в статье это общий пример, с практикой имеющий мало общего. Такую запись *:not(p) я никогда не видел и сам не использовал, в ней слишком много нужно учесть — это ни к чему на практике.

Я не знаю как вы проверяли, но думаю, если вы скините свой пример, я вам смогу объяснить почему у вас "не работает". Вы вероятно что-то не учли кажется что что-то работает не так.

То что пример сугубо теоретический это понятно даже мне. Но теория и нужна для того, чтобы понять принцип работы того или иного механизма/явления.

Ну вы первое правило в css уберите, и оставьте только второе. И будет как раз "мой пример".
А вот еще аналогичный, но вместо * у меня div — https://jsfiddle.net/8c2x8og8/
То о чем я говорю, это составные селекторы X Y, например https://jsfiddle.net/fp6xuLh4/
Только вместо Y у меня "ничего(а конкретнее какой-то любой дочерний элемент)", а пробел это просто способ показать браузеру, что это составной селектор)
Вот у вас второй пример там же с составными селекторами как раз,
правило то применяется не к ul, а к li (ul li)

И вы говорите, что зависит от предыдущего селектора, но если я напишу просто
ul:not(.last) < color: blue; >
И при этом не укажу li перед :not , то мы получим весь список синим.
Однако так: li:not(.last) будет работать как надо.
Отсюда я и сделал вывод, что "аргумент" у :not(то что в скобках) и то что перед :not, должны находится на одном уровне

Многое из выше написанного может оказаться бредом) Просто пытаюсь понять логику. На самом деле, как для меня, самое трудное в понимании, это как раз не как работает тот или иной селектор, а к чему он относится и какая у него область действия

Тут все логично, вы что-то не так понимате и путаетесь. Но это нормально — это процесс обучения, так часто бывает, со временем все в голове встанет на места.

Во-первых: у вас p тег не закрыт

Во-воторых: #main это ID элемента div и этот элемент всегда :not(p) — это не p — это div и поэтому это условие будет срабатывать всегда. Т.е. запись #main:not(p) означает — все элементы, кроме p с id=main .

И конечно все внутри #main будет зеленым! Это и происходит.

Чтобы только p сделать красным, нужно написать так:

т.е. первая строка делает все тексты в main красными, а вторая перебивает её и говорит сделать все зеленым кроме p.

:not() тут не совсем подходит.

Область действия стилей ограничивается только тем элементом к которому эти стили применяются. Однако в браузере по умолчанию все элементы имеют свои свойства. Например свойство color по умолчанию у всех элементов равно inherit — наследовать от родителя. А значит если мы родителю укажем красный цвет текста, то все вложенные элементы будут наследовать этот цвет и тоже будут красные, если только не указать другое. И кажется, что свойство color как бы распространяется на текущий и все вложенные элементы, хотя технически это не так.

Пробел в CSS отделяет селектор и переводит его на вложенный элемент, а если пробела нет, то все селекторы относятся к одному элементу. Например: #main:not(p) — это 2 селектора, которым должен соответствовать один элемент: у элемента должен быть и тег не P. Также, как например: .foo.bar — будет влиять на элемент у которого есть сразу 2 класса foo и bar. Еще такой пример input[type="text"] — 2 селектора для одного элемента. ПО аналогии можно добавить еще селекторов, например input[type="checkbox"].foo — 3 селектора: input с типом checkbox и классом foo . Или вот еще пример input[type="checkbox"]:not(:checked) — сами скажите что это значит

Во-воторых: #main это ID элемента div и этот элемент всегда :not(p) — это не p — это div и поэтому это условие будет срабатывать всегда. Т.е. запись #main:not(p) означает — все элементы, кроме p с >

Сначала прочитал как
<p > </p>
Но как понимаю вы имели ввиду, все элементы кроме p и у этих элементов должен быть id Что кстати да в примере ниже, сначала не понял какой верный вариант даже.

Например: #main:not(p) — это 2 селектора, которым должен соответствовать один элемент: у элемента должен быть и тег не P.

Проблема то изначально была именно в начальном примере, конкретно в том, что стилевой параметр наследуемый по умолчанию.

Означает что элемент должен быть не <p> и любой. Но поскольку color наследуемый параметр, создается впечатление что пример выше не рабочий, если только не указать выше явно color для *
Если бы там был border (не наследуемый) все было бы лучше для меня
Однако, если использовать составной(upd. контекстный) селектор, скажем так
* body *:not(p)
то не имеет значения наследуемый параметр или нет, потому что мы обращаемся ко всем элементам на одном уровне(блин, уровень наверное не корректно говорить(понять бы границы этого уровня, как то не смог нагуглить вчера), я имею ввиду, что все элементы сестринские, а значит и наследования нет), и ищем элемент там
Вооот, а дальше объясните мне разницу, пожалуйста, между:

В том плане, насколько третья запись не корректная? -) Ну нравится она мне, я как бы хочу получить доступ просто к дочерним элементам, а не ко всем или к конкретным

input[type="checkbox"]:not(:checked) — сами скажите что это значит smile

Судя по всему это значит "выбрать все флажки, которые не чекнуты"
Хотя вроде бы есть unchecked или я путаю с джес? Весь вопрос не в том, как работает селектор, а в том, в каком диапазоне он работает. В том плане, что подразумевается перед input в CSS? Я так понимаю он выбирает все input в документе независимо от их вложенности 😕
Еще вопрос, а можно ли сделать дефалтно наследуемый параметр типа color-a не наследуемым? inherit наоборот -) Прошу прощения если много букв.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *