Как добавить селектор в css
Перейти к содержимому

Как добавить селектор в css

  • автор:

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

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

Группирование селекторов (А, B)

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

Пример 1. Стиль для каждого селектора

h1 < font-family: Arial, Helvetica, sans-serif; font-size: 1.6rem; color: #003; >h2 < font-family: Arial, Helvetica, sans-serif; font-size: 1.3rem; color: #333; >h3 < font-family: Arial, Helvetica, sans-serif; font-size: 1.2rem; color: #900; >p

Из данного примера видно, что стиль для элементов , , содержит одинаковое значение font-family . Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 2.

Пример 2. Сгруппированные селекторы

h1, h2, h3 < font-family: Arial, Helvetica, sans-serif; >h1 < font-size: 1.6rem; color: #003; >h2 < font-size: 1.3rem; color: #333; >h3

В данном примере единое для всех селекторов свойство font-family применяется сразу к нескольким селекторам, а отдельные свойства уже добавляются к каждому селектору отдельно.

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

h2, .block, .msg

Здесь свойство background применяется одновременно к элементу и к классам block и msg .

Дерево документа

Большинство комбинаций селекторов основано на их положении в дереве документа и относительно друг друга. Дерево документа — это схематичное изображение всех элементов, встречающихся в нашем коде HTML. Для иллюстрации возьмём произвольный документ, показанный в примере 3.

Пример 3. Код HTML

Дерево документа для этого HTML показано на рис. 1. Схема напоминает крону дерева из-за своей схожести с ветвями и листьями.

Дерево документа

Рис. 1. Дерево документа

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

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

      , но уже не для
    • , для него родителем будет выступать
        . Ребёнок (дочерний элемент) Непосредственный потомок элемента, который располагается ниже на один уровень в дереве документа. К примеру, дочерним для будет элемент

        ; для

          дочерними элементами выступают
        • , но не . У родителя может быть произвольное число дочерних элементов, но у дочернего элемента только единственный родитель. Братья (сиблинги) Элементы, расположенные на одной ветке и имеющие общего родителя, называются братскими или сиблинги, если пользоваться термином из генетики. Братскими являются элементы , и , а также
        • . Элементы братскими не являются из-за того, что у них разные родители. Смежные Братские элементы, расположенные рядом друг с другом. Смежными будут элементы и , а также и , но никак не и , потому что они располагаются «через одного».

        Селекторы потомка (A B)

        Эти селекторы также называются вложенными или контекстными. Такие селекторы состоят из базовых селекторов разделённых пробелом.

        footer a

        Пример 4. Цвет ссылок

        Результат данного примера показан на рис. 2. Для изменения цвета ссылок вверху мы использовали селектор header a , а для ссылок внизу — footer a .

        Ссылки разного цвета

        Рис. 2. Ссылки разного цвета

        Селекторов не обязательно должно быть только два, можно комбинировать произвольное количество.

        .tbl thead td

        Дочерние селекторы (A > B)

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

        section > h2

        Данная запись означает применить стиль к элементу , который является дочерним по отношению к . Для следующего фрагмента HTML красным цветом будет оформлен первый заголовок , поскольку только он непосредственно располагается внутри и выступает его дочерним элементом.

         

        Заголовок 1

        Заголовок 2

          располагается внутри другого. Чтобы стилизовать пункты списка первого уровня, не затрагивая остальные, и требуются дочерние селекторы.

        Пример 5. Дочерние селекторы

        Результат данного примера показан на рис. 3.

        Изменение стиля дочерних элементов

        Рис. 3. Изменение стиля дочерних элементов

        Смежные селекторы (A + B)

        Выбирает элемент B, который является смежным для элемента A, иными словами, идёт в коде сразу же после него. К примеру, следующая запись изменит цвет только первого абзаца после заголовка.

        h2 + p

        Смежные селекторы обычно применяются для стилизации полей формы или создания разных эффектов. В примере 6 текстовый абзац с классом hidden прячется с помощью свойства display со значением none . При наведении курсора мыши на абзац с классом more смежный с ним абзац с классом hidden становится виден. Подробнее об использовании :hover говорится в разделе про псевдоклассы.

        Пример 6. Смежные элементы

        Братские селекторы (A ~ B)

        Выбирает все братские элементы B, которые идут в коде после элемента A. К примеру, следующая запись изменит цвет всех абзацев после заголовка.

        h2 ~ p

        В примере 7 при наведении курсора мыши на любую звёздочку, все остальные, которые располагаются правее неё, меняют цвет с серого на красный. Поскольку братские селекторы работают только для элементов справа, а не слева от указанного, то мы идём на хитрость и переворачиваем все звёздочки с помощью атрибута dir со значением rtl . Это меняет текст и расположение элементов справа налево.

        Пример 7. Братские селекторы

        Результат данного примера показан на рис. 4.

        Использование братского селектора

        Рис. 4. Использование братского селектора

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

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

        Удобный способ выбрать из HTML-разметки элементы только с нужным классом. И применить к ним стили.

        Время чтения: меньше 5 мин

        Открыть/закрыть навигацию по статье
        Контрибьюторы:

        Обновлено 20 декабря 2021

        Кратко

        Скопировать ссылку «Кратко» Скопировано

        Селектор по классу находит элемент на странице по значению атрибута class .

        Пример

        Скопировать ссылку «Пример» Скопировано

         

        Нобелевская премия по физике 2020 года

        Шнобелевская премия 2020

        h2 class="article-title">Нобелевская премия по физике 2020 годаh2> h3 class="article-title">Шнобелевская премия 2020h3>

        Селектор ниже найдёт все элементы, значение атрибута class которых равно article — title .

         .article-title  margin-bottom: 1.6em;> .article-title  margin-bottom: 1.6em; >      

        Как пишется

        Скопировать ссылку «Как пишется» Скопировано

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

        Вот так сработает:

         .class-value  color: red;> .class-value  color: red; >      

        А вот так не сработает:

         class-value  color: red;> class-value  color: red; >      

        Стиль применится ко всем элементам с атрибутом class = «article — title» .

         .article-title  margin-bottom: 1.6em;> .article-title  margin-bottom: 1.6em; >      

        Стиль применится ко всем заголовкам с атрибутом class = «article — title» .

         h2.article-title  margin-bottom: 1.6em;> h2.article-title  margin-bottom: 1.6em; >      

        Стиль применится ко всем заголовкам , атрибут class которых содержит несколько значений, разделённых пробелом, и среди этих значений есть «article — title» и «title — primary» .

         h2.article-title.title-primary  text-decoration: underline;> h2.article-title.title-primary  text-decoration: underline; >      

        Обратите внимание: селектор .article — title эквивалентен селектору по атрибуту [class ~ = «article — title» ] .

        Подсказки

        Скопировать ссылку «Подсказки» Скопировано

        Селектор по классу довольно прост в понимании, а особенности атрибута class дают большую гибкость в стилизации. Мы всегда можем придумать уникальное значение для атрибута class и по этому значению точечно применить нужные стили. Но также мы можем задать элементу любое количество классов, просто перечислив их через пробел. Благодаря этому мы можем переиспользовать некоторые стили на разных элементах.

         
        Зима пробуждает аппетит.
        Зима пробуждает аппетит.
        Зима пробуждает аппетит.
        blockquote class="color" cite="Эрих Мария Ремарк">Зима пробуждает аппетит. blockquote> blockquote class="author" cite="Эрих Мария Ремарк">Зима пробуждает аппетит. blockquote> blockquote class="author color" cite="Эрих Мария Ремарк">Зима пробуждает аппетит. blockquote>
         blockquote  position: relative; background-color: white; color: #123E66;> blockquote  position: relative; background-color: white; color: #123E66; >      

        Если цитате добавить класс .color , то фоновый цвет сменится на голубой:

         .color  background-color: blue; color: black;> .color  background-color: blue; color: black; >      

        Если элементу добавить класс .author , то перед текстом цитаты будет декоративная кавычка, а после — имя автора:

         .author::before  content: "“"; position: absolute;> .author::after  content: attr(cite); display: block; font-style: italic;> .author::before  content: "“"; position: absolute; > .author::after  content: attr(cite); display: block; font-style: italic; >      

        На практике

        Скопировать ссылку «На практике» Скопировано

        Денис Ежков советует

        Скопировать ссылку «Денис Ежков советует» Скопировано

        �� Селектор по классу является основным селектором для стилизации любой веб-страницы. Благодаря тому, что одному элементу можно задать несколько классов, а нескольким элементам — один и тот же класс, мы получаем очень гибкий способ стилизации страниц любой сложности.

        Например, мы можем уточнить один селектор по классу другим:

             form> label class="form-label invalid" for="input">Ваш emaillabel> input class="form-input invalid" type="email" id="input"> form>      
         .form-label.invalid  color: pink;> .form-input.invalid  border-color: pink; background-color: #623D45;> .form-label.invalid  color: pink; > .form-input.invalid  border-color: pink; background-color: #623D45; >      

        А можем добавить класс родительскому элементу, чуть изменить селекторы и получить тот же результат:

             form class="invalid"> label class="form-label" for="input">Ваш emaillabel> input class="form-input" type="email" id="input"> form>      
         .invalid .form-label  color: pink;> .invalid .form-input  border-color: pink; background-color: #623D45;> .invalid .form-label  color: pink; > .invalid .form-input  border-color: pink; background-color: #623D45; >      

        Самое сложное в вёрстке — выбрать способ решения задачи, потому что любая задача решается двумя и более способами ��

        Селекторы CSS

        Описание видов селекторов в языке CSS.

        Селекторы
        Селекторы в языке CSS

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

        Селектор (от англ. selector) — сортировка, выборка. Под селекторами, в языке CSS понимается способ выборки элементов (тегов) страницы.

        Как мы знаем из учебника по CSS, схема CSS-кода выглядит следующим образом:

        селектор

        Виды CSS-селекторов

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

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

        Основные виды селекторов CSS

        1. Селектор тега — выбор элемента страницы по имени его тега имяТега < >
        2. Селектор class — выбор элемента страницы по имени его класса .имяКласса < >
        3. Селекторы id — выбор элемента страницы по имени его уникального идентификатора #имяУникальногоИдентификатора

        Взаимоотношения между селекторами CSS

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

        1. Контекстные селекторы — выбор элементов потомков селектор селектор < >(между селекторами ставят пробел).
        2. Дочерние селекторы — выбор дочерних элементов селектор > селектор < >(между селекторами ставят знак больше).
        3. Соседние селекторы — выбор соседних (братских, сестринских) элементов селектор + селектор < >(между селекторами ставят знак плюс).

        Если что не понятно, не переживайте, каждый селектор и их взаимоотношения мы рассмотрим отдельно, в статьях посвященных только им, вот только допишу эти статьи ��

        Селекторы атрибутов и значений

        Селекторы атрибутов и значений — выбирают элементы по их атрибуту или атрибуту и значению.

        1. Селектор атрибута — выбор элемента по имени атрибута [атрибут] < >
        2. Селектор атрибута и значения — выбор элемента по имени его атрибута и значения [атрибут = «значение»]

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

        В CSS-коде, универсальный селектор записывают как символ звёздочка * Универсальный селектор необходим для того,
        чтобы задать CSS-свойства сразу всем элементам страницы. Обычно его используют для того чтобы обнулить отступы у элементов, пример:

        Отступы у всех элементов страницы равны 0.

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

        Группирование селекторов — выбор нескольких селекторов и назначение им определённых CSS-свойств, схема:

        селектор, селектор

        Между селекторами ставят запятую.

        Селекторы CSS. Виды и группировка

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

        селектор { свойство: значение; свойство: значение; /* . */ }
        p { text-align: center; font-size: 20px; }

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

        на странице.

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

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

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

        /* для всех */ input { /* . */ }

        Например, установим для всех

        величину нижнего оступа, равной 1rem :

        /* для всех 

        */ p { margin-bottom: 1rem; }

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

        /* для всех элементов, имеющих в атрибуте class слово card */ .card { /* . */ }

        Например, установим для всех элементов с классом center выравнивание текста по центру:

        .center { text-align: center; }

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

        /* для элемента с */ #slider { /* . */ }

        Например, установим фон и верхний внешний отступ для элемента с id=»footer» :

        /* для элемента с */ #footer { background-color: #eee; margin-top: 20px; }

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

        Например, установим всем элементам на странице margin: 0 и padding: 0 :

        * { margin: 0; padding: 0; }

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

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

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

        1. С атрибутом target :

        [target] { background-color: red; }

        2. С атрибутом rel=»nofollow» :

        [rel="nofollow"] { background-color: green; }

        3. С атрибутом href и значением, которое должно начинаться с https :

        [href^="https"] { background-color: yellow; }

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

        [class|="test"] { background-color: orange; }

        5. С атрибутом class и значением, которое заканчивается на color :

        [class$="color"] { background-color: yellow; }

        6. С атрибутом href и значением, которое содержит подстроку youtu.be (пример элемента, соответствующего этому селектору: . ):

        [href*="youtu.be"] { background-color: green; }

        7. С атрибутом data-content и значением, которое содержит строку news , отделённую от других слов с помощью пробела (пример элемента, соответствующего этому селектору ):

        [data-content~="news"] { background-color: brown; }

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

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

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

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

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

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

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

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

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

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

        /* селектор a.external:link выберет все элементы a с классом external пользователь по которым ещё не переходил */ a.external:link { color: red; }
        Псевдокласс :visited

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

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

        /* селектор .side a:visited выберет все элементы a, находящиеся в .aside, пользователь которые уже посетил */ .aside a:visited { color: #000; }
        Псевдокласс :active

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

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

        /* селектор a:active выберет все элементы a, находящиеся в активном состоянии */ a:active { background-color: yellow; }
        Псевдокласс :hover

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

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

        /* селектор .btn-warning:hover выберет все элементы .btn-warning при поднесении к ним курсора */ .btn-warning:hover { color: #fff; background-color: #ff8f00; }

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

        a:link { . } a:visited { . } a:hover { . } a:active { . }

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

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

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

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

        /* селектор input[type="text"] найдет элемент input с атрибутом type="text" при нахождении его в фокусе */ input[type="text"]:focus { background-color: #ffe082; }

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

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

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

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

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

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

        /* селектор li:first-child выберет элементы li, которые являются первыми элементами своего родителя */ li:first-child { font-weight: bold; }
        Псевдокласс :last-child

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

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

        /* селектор .alert-warning:last-child выберет элементы .alert-warning которые являются последними элементами своего родителя */ .alert-warning:last-child { font-weight: bold; }
        Псевдокласс :only-child

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

        h2: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.

        /* селектор .li:nth-child(2) выберет элементы li, которые явлются вторыми элементами своего родителя */ .li:nth-child(2) { . } /* селектор .li:nth-child(odd) выберет элементы li, которые явлются нечётными элементами (1, 3, 5, . ) своего родителя */ .li:nth-child(odd) { . } /* селектор .li:nth-child(even) выберет элементы li, которые явлются чётными элементами (2, 4, 6, . ) своего родителя */ .li:nth-child(even) { . } /* селектор .li:nth-child(2n+1) выберет элементы li, которые имеют порядковые номера 1, 3, 5, 7, . внутри своего родителя */ .li:nth-child(2n+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-of-type { . }

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

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

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

        li:last-of-type { . }
        Псевдокласс :only-of-type

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

        p: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 , которые находятся во включенном состоянии.

         
        input:checked + label { background-color: yellow; }

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

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

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

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

        input:enabled { background-color: yellow; }
        Псевдокласс :disabled

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

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

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

        input:disabled { . }

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

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

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

        /* Селектор .aside > div:not(:first-child) выберет все элементы div кроме первого непосредственно расположенные в .aside */ .aside > div:not(:first-child) { . }

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

        /* такие конструкция работать не будет */ :not(:not(. )) { . } div:not(.alert.alert-warning) { . } .item:not(::before) { . } .slider .slider__item:not(.active img) { . } td:not(.row + td) { . }

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

        /* применим стили ко всем элементам div, расположенных непосредственно в .message, за исключением .alert-warning и .alert-danger */ .message > div:not(.alert-warning):not(.alert-danger) { . }

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

        // этот селектор выберет все элементы p, которые не содержат класс alert p:not(.alert) { . }
        Псевдокласс :empty

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

        div:empty { . }

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

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

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

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

        :root { --text-info: hotpink; --text-warning: hotpink; --aside-padding: 10px 15px; }
        Псевдокласс :target

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

        :target { color: red; }

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

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

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

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

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

        /* селектор h3, h4 выберет все элементы на странице, имеющих тег h3 и h4 */ h3, h4 { font-size: 20px; margin-top: 15px; margin-bottom: 10px; }

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

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

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

        .modal.open { . }

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

        .btn[data-toggle="collapse"]:first-child { . }

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

        В 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

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

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

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

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

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

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