Селекторы 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 элементами:
- родитель – элемент, непосредственно в котором находится рассматриваемый элемент;
- предок – это элемент, который расположен на одном из уровней иерархии элементов, до которого можно дойти двигаясь от рассматриваемого элемента к его родителю, от его родителя к родителю его родителя и т.д.
- дети – это элементы, непосредственно расположенные в текущем рассматриваемом элементе;
- потомки (дочерние элементы) – это любые элементы, которые находятся в текущем элементе вне зависимости от уровня иерархии, в котором они расположены;
- соседи (сиблинги) – это элементы, расположенные на том же уровне вложенности (иерархии), что и рассматриваемый элемент; или другими словами — это все другие элементы, которые имеют того же родителя что и текущий рассматриваемый элемент.
Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.
В 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 так выбрать элемент нельзя.
Группировка селекторов
Для того, чтобы уменьшить количество кода после компиляции, а также упростить работу с селекторами, в Less был введён специальный псевдокласс :extend() . Этот псевдокласс позволяет производить группировку селекторов (объединение) за счёт перечисления нескольких классов в одном месте, при условии, что все эти селекторы имеют общие свойства. Проще говоря, псевдокласс :extend() автоматизирует следующий процесс:
- Найти селекторы, у которых есть одинаковые свойства.
- Выбрать базовый селектор.
- Перечислить все найденные селекторы в объявлении базового селектора.
- Все новые селекторы добавлять в список селекторов базового объявления.
Под списком селекторов понимается последовательность селекторов, разделяемая с помощью запятой. Я более чем уверен, что вы уже встречали такие списки и даже их использовали в своих проектах.
Следующих код демонстрирует такой список:
.header, .main, .footer < background-color: #f5f5f5; > Раньше такие мероприятия производились вручную, и то при желании разработчика. Поверьте, это очень ресурсоёмкое занятие и самое ужасное — это когда элемент на странице меняет своё оформление. В этом случае приходится пользоваться поиском и повторять определённую последовательность действий каждый раз, когда встречается искомый селектор. Выполняются такие мероприятия лениво, неохотно и без особого энтузиазма. К счастью, разработчики препроцессора Less нашли способ борьбы с этим недугом.
Окей, а что же тогда предлагают препроцессоры? — писать код и не обращать внимание на такие мелочи. Конечно, такое говорится с оговоркой на то, что изредка придётся использовать препроцессорный псевдокласс :extend() .
Рассмотрим несколько тривиальных примеров для погружения в курс дела и получения первого опыта работы с :extend() .
Пример 2.4.1
Чтобы понять, как работает этот псевдокласс, представим, что у нас есть три селектора и свойства у них одинаковые.
.class-1 < background-color: #fff; color: #000; > .class-2 < background-color: #fff; color: #000; > .class-3 < background-color: #fff; color: #000; > В этом случае можно полностью объединить .class-1 , .class-2 и .class-3 . Если провести такие манипуляции с нашим примером, то получится следующий код:
.class-1, .class-2, .class-3 < background-color: #fff; color: #000; > Less предлагает эквивалентное решение, но в тоже время более простое. Он говорит нам, что нужно объявить полностью лишь селектор .class-1 , а другие сгруппировать с ним. Для этого предлагается использовать :extend() .
.class-1 < background-color: #fff; color: #000; > .class-2:extend(.class-1) <> .class-3 < &:extend(.class-1); > Важно понимать, что использовать :extend() можно как и любой другой псевдокласс. Имеется в виду, что допустимо как прямое написание ( .class:extend() ), так и с использованием родительского селектора ( .class < &:extend() >).
Проведя процедуру компиляции на выходе мы получим все тот же CSS, который и получили при ручной оптимизации:
.class-1, .class-2, .class-3 < background-color: #fff; color: #000; > Пример 2.4.2
Можно указывать как один селектор для расширения, так и несколько.
.class-1 < background-color: #fff; > .class-2 < background-color: #fff; > .selector < &:extend(.class-1, .class-2); > В результате такого объявления класс .selector будет группироваться и с первым ( .class-1 ) селектором, и со вторым ( .class-2 ).
.class-1, .selector < background-color: #fff; > .class-2, .selector < background-color: #fff; > Расширение правил
Селекторы можно не только группировать, но и расширять. Все эти громкие слова на самом деле пляшут вокруг все того же :extend() . Ранее рассматривались примеры, в которых все свойства у селекторов были одинаковыми и это те самые идеальные случаи. На практике такое встречается редко, но все таки встречается. Чаще всего попадаются другие случаи, когда часть свойств совпадают, а часть — нет. В этом случае опять пригодится этот же псевдокласс.
Пример 2.4.3
В студии «Артемка и КО» разрабатывается дизайн для продающего лендинга известной компании, производящей конфеты.
.global-header < background-color: #fff; color: #000; > .global-navigation < border: 1px solid #ddd; > По дизайну, селектору .global-navigation полагается белый фон и чёрный цвет у текста. Можно было бы просто скопировать недостающие свойства, но по желанию верстальщика решили использовать :extend() , тем самым получив недостающие свойства.
.global-header < background-color: #fff; color: #000; > .global-navigation < &:extend(.global-header); border: 1px solid #ddd; > По сути своей, это одно и то же, что и группировка селекторов, но я должен был рассказать об этом. Сделано это для того, чтобы вы не подумали о том, что группировать можно лишь те селекторы, у которых совпадают свойства.
Группировка с цепочкой селекторов
Препроцессоры настолько умные, что в состоянии уследить за цепочкой селекторов с одним именем. Делается это с помощью все того же псевдокласса :extend() , но с добавлением некоего параметра all .
Пример 2.4.4
Студия «Артемка» получила свои первые правки по макету для компании, производящей конфеты. Заказчик хочет, чтобы подвал сайта имел такие же стили, как и шапка сайта.
.global-header < background-color: #fff; .area < text-align: center; > > .global-header:hover < background-color: #000; > Верстальщик вспоминает о возможности группировки селекторов .global-footer со всеми селекторами, имеющими имя .global-header . На ум ему приходит только одно:
.global-footer < &:extend(.global-header); > Однако, после компиляции он получает не совсем желанный результат. Селектор .global-footer группируется лишь с самым первым селектором, а остальные игнорируются.
.global-header, .global-footer < background-color: #fff; > .global-header .area < text-align: center; > .global-header:hover < background-color: #000; > Для решения этой проблемы ему необходимо использовать параметр all , говорящий компилятору о том, что селектор хочет сгруппироваться со всеми совпадающими по имени селекторами. Передать этот параметр нужно следующим образом:
.global-footer < &:extend(.global-header all); > В итоге получается требуемый результат. Студия «Артемка» продолжает работу над проектом, а заказчик продолжает присылать желанные правки.
.global-header, .global-footer < background-color: #fff; > .global-header .area, .global-footer .area < text-align: center; > .global-header:hover, .global-footer:hover < background-color: #000; > Контекстная группировка
Less поддерживает группировку с конкретным селектором. Речь идёт про то, что :extend() может принимать в качестве цели не только название селектора, но и селектор с необходимой вложенностью, контекстом и некоторыми другими параметрами.
Псевдокласс :extend() умеет работать с:
- nth: :extend(:nth-child(n+3)) .
- атрибутами: :extend([title=identifier]) .
- псевдоклассами: :extend(link:visited:hover) .
- псевдоэлементами: :extend(link:before) .
Пример 2.4.5
Верстальщик получает макет, в котором стили оформления товаров в каталоге и статей в блоге имеют общие стили, но лишь в шапке.
.item < background-color: #fff; border: 1px solid #ddd; .header < padding: 25px; > > Ему хочется унаследовать стили .item .header , но не хочется городить лишнего кода. Приходится использовать контекстную группировку с применением уже знакомого нам псевдокласса :extend() .
.item < background-color: #fff; border: 1px solid #ddd; .header < padding: 25px; > > .article < &:extend(.item .header); > После компиляции получается код, который полностью соответствует ожиданиям верстальщика и его требованиям:
.item < background-color: #fff; border: 1px solid #ddd; > .item .header, .article < padding: 25px; > Мысли и советы
Пожалуй, это самый объёмный по материалу функционал для изучения, предоставляемый CSS-препроцессором Less. В то же время, это наименее используемый функционал в реальных проектах, так как приходится запоминать имена селекторов для группировки, а при достаточно объёмном проекте это не позволительная роскошь.
Я бы советовал аккуратно работать с :extend() и использовать его лишь тогда, когда это действительно оправданный шаг. Благодаря известному всем разработчикам фреймворку Bootstrap, я стал использовать :extend() лишь для группировки селекторов с селектором .clearfix . Такой подход позволяет исключить появление дополнительных классов в документе, тем самым делая структуру более чистой.
results matching » «
No results matching » «
Комбинации селекторов
Разные селекторы можно комбинировать между собой, что в итоге позволяет нам сократить код и нацелить стиль на выбранные элементы, основываясь на их положении относительно друг друга.
Группирование селекторов (А, 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. Использование братского селектора
Комбинации селекторов позволяют выделить элемент, расположенный справа или внутри заданного элемента, но никак не родительский элемент или элемент, расположенный слева.
Учебник CSS. Бесплатные уроки по CSS. Изучаем каскадные таблицы стилей и пробуем красиво оформлять веб-сайты и страницы.
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Я продолжаю рубрику Уроки CSS. Из этой рубрики вы можете узнать о том, как создать простое CSS меню для сайта, как сделать горизонтальное и вертикальное CSS меню, о возможностях и функциях CSS, а также о том, что такое CSS правила, CSS стили, CSS свойства и значения. Сегодня будет публикация посвященная CSS селекторам и способам группировки в CSS. Из этой публикации вы узнаете о простых CSS селекторах, универсальных CSS селекторах, о способах группировки CSS объявлений и группировки CSS стилей.
CSS селекторы. Группировка CSS.
В прошлых публикациях, я описывал то, как можно применить один CSS стиль к одному HTML элементу. В этой публикации я постараюсь описать то, как можно применить несколько стилей к одному HTML элементу и то, как можно применить одни и те же CSS стили к нескольким HTML элементам. В этой публикации я рассмотрю какие средства есть в CSS для группировки стилей.
Группировка CSS селекторов
Как я уже говорил: ранее мы рассмотрели то, как применить один CSS стиль к одному HTML элементу, но что делать, если мы хотим применить один и тот же стиль для нескольких элементов? Для того, чтобы это сделать можно использовать несколько CSS селекторов, либо применять и создавать несколько CSS стилей к одному или нескольким HTML элементам. Допустим, мы хотим, чтобы цвет текста абзацев, которые создаются при помощи тега
, в HTML документе совпадал с цветом заголовков в HTML документе, которые создаются при помощи тегов , и так до . Для этого мы можем создать следующее CSS объявление:
p , h1 , h2 , h3 , h4 , h5 , h6 < color : #1394EF;
За фигурными скобками, в левой части CSS правила я написал CSS селекторы, при помощи которых отбираются нужные элементы, на которые будет распространяться данное CSS правило. Поскольку нам необходимо объединить CSS селекторы, мы разделяем их запятой. Таким образом, CSS стиль, который написан в фигурных скобках будет применен ко всем отобранным элементам, то есть цвет текста всех этих элементов примет значение #1394ef. Запята сообщает браузеру о том, что в правило включено несколько элементов, если запятую не ставить, то правило будет иметь немного другое значение, но об этом позже.
Ограничений по числу группируемых CSS селекторов нет, вы можете сгруппировать два HTML элемента, а можете отобрать и применить CSS правило для всех HTML элементов на странице. Группировка CSS селекторов позволяет существенно упростить разработку и оформление HTML документов, а также существенно уменьшить объем набираемого кода, например, вам необходимо, чтобы все заголовки на странице были одного цвета, вы можете создать для каждого заголовка отдельное CSS правило:
А можете сгруппировать CSS селекторы и ваш код существенно уменьшится:
h1 , h2 , h3 , h4 , h5 , h6 < color : #1394EF;>
Вы можете группировать различные HTML элементы и при этом получать одинаковый результат.
Универсальный CSS селектор
В CSS существует универсальный селектор, который позволяет применить CSS стили сразу ко всем элементам на веб-странице, такой селектор называется универсальным и представлен символом “*”. Универсальный CSS селектор соответствует практически любому элементу HTML страницы. Опять же, давайте попробуем задать одинаковый цвет всем HTML элементам на странице:
Конечно, можно было бы сгруппировать все CSS селекторы в один и затем задать для них один общий CSS стиль, но зачем это делать, если есть один универсальный CSS селектор. С помощью универсального CSS селектора мы присвоили атрибуту color каждого CSS селектора значение gray, написав всего лишь одну короткую строчку кода, но будьте осторожны, применяя универсальный CSS селектор, при его использование могут появиться нежелательные последствия.
Группировка CSS объявлений
Как вы уже видели, мы можем группировать CSS селекторы и задавать для них один стиль. Но никто нам не запрещает группировать CSS объявления, предположим, что мы хотим, чтобы в абзаце текст был размером 12 пикселов, был написан шрифтом Arial, цвет текста был оранжевым и написан он был на сером фоне, конечно, мы можем записать CSS стили таким образом:
Такая запись неудобна, неэффективна, требует лишнего времени и вы можете легко запутаться создавая такие конструкции, допустим если нам придется для одного элемента создать 15-20 стилей CSS, что вполне реально. Поэтому следует группировать CSS объявления, потом будет проще изменять стили:
font : 12px Arial ;
color : orange ;
background : gray ;
В этом случае каждый стиль вам придется разделять точкой с запятой, поскольку именно этот символ указывает на окончание одного стиля и начала другого. Допустим, мы забыли поставить точку с запятой после атрибута color.
Тогда браузер интерпретирует запись следующим образом:
font : 12px Arial ;
color : orange background : gray ;
Размер текста и шрифт будут такими, как указано в записи, поскольку здесь написано все правильно. Но, background не является правильным значением для атрибута color, а еще для атрибута color можно присвоить только одно значение, поэтому браузер проигнорирует CSS объявление color. Поэтому вы не увидите ни оранжевого цвета, ни серого фона. Для этих элементов будет задан стиль, который прописан в браузере по умолчанию, чаще всего это черный цвет и белый фон.
Но вы можете не завершать последнее объявление точкой с запятой, браузер поймет вас правильно и отобразит элементы так, как хотите вы, но правила хорошего тона требуют ставить точку с запятой после каждого CSS объявления. Группировка селекторов CSS и группировка CSS объявлений помогает уменьшить объем кода и сделать его более понятным, что соответственно ведет к уменьшению времени загрузки ваших страниц и снижению нагрузки на сервер.
Группировка CSS селекторов и объявлений
Помимо того, что в CSS можно осуществлять группировку CSS селекторов и CSS объявлений, можно группировать сразу и CSS селекторы и CSS объявления вместе. Это позволяет уменьшить объем кода и сделать каскадные таблицы стилей еще более понятными. Таким образом, мы можем создавать сложные CSS стили, при этом напечатав немного кода. Предположим, что мы хотим задать несколько одинаковых стилей для всех заголовков в HTML документе. Это можно сделать так: