Как освоить вложенные селекторы CSS: советы для начала
Вы пытаетесь узнать больше о селекторах CSS, но чувствуете себя немного подавленным? Ну, вы в правильном месте! Освоение селекторов CSS не должно быть сложной задачей.
Вы можете начать с простого и двигаться вверх. Один из лучших способов настроиться на успех — научиться группировать и вкладывать селекторы CSS.
Это не только поможет вам писать более чистый код, но и упростит устранение неполадок на веб-страницах, если что-то пойдет не так. В этом руководстве мы рассмотрим некоторые советы и приемы для освоения вложенных селекторов CSS.
Мы обсудим, что такое вложенность и почему она важна, а также рассмотрим несколько практических примеров правильного использования вложенных селекторов.
Что такое селекторы CSS?
Когда дело доходит до оформления веб-сайтов, селекторы CSS играют огромную роль. Проще говоря, селектор CSS — это просто способ нацеливания на фрагменты HTML кода, чтобы придать им определенные свойства. стили.
Используя селекторы, вы можете настроить внешний вид своего веб-сайта, не заходя в сам HTML код.
Селекторы CSS могут варьироваться от простых отдельных элементов, таких как
или , до более сложных групп, таких как классы и идентификаторы. Вы даже можете использовать вложенные селекторы, которые позволяют выбирать элементы внутри элементов.
Преимущество использования вложенных селекторов заключается в том, что вы можете создавать очень специфичные стили — стили, которые не будут влиять на другие части вашего веб-сайта — без необходимости использовать сложный JavaScript или jQuery функции.
Вложенные селекторы CSS — это мощные инструменты, которые любой веб-дизайнер должен понять и освоить, чтобы придать своим сайтам наилучший внешний вид.
Понимание группировки в CSS
Используя группировку и вложение, вы можете сэкономить время и упорядочить свои таблицы стилей. Это позволяет вам внести одно изменение, влияющее на несколько элементов, вместо того, чтобы вручную редактировать каждый элемент по отдельности.
Чтобы создать группу в CSS, используйте запятую между селекторами. Например, если вы хотите применить один и тот же стиль к элементам и , ваш код будет выглядеть следующим образом:
div, span color: red; font-size: 20px; > Вы также можете использовать звездочку (*) в качестве селектора подстановочных знаков. Это повлияет на любой элемент вашего HTML документа:
* font-family: sans-serif; > Чтобы вложить элементы в группы, используйте знак «больше» (>).
Это позволяет настроить таргетинг на определенный HTML-тег, содержащийся в другом элементе.
Например, если вы хотите изменить размер шрифта для всех ссылок, содержащихся в тегах , ваш код будет выглядеть следующим образом:
div > p > a Поняв и применяя как группировку, так и вложение вместе в CSS, вы сможете создавать эффективные и организованные таблицы стилей, которые облегчат вам управление ими в будущем.
Понимание вложенности в CSS
Готовы запачкать руки? Большой! Давайте поговорим о вложенности в CSS.
Вложение – это мощный инструмент, который помогает организовать стили для веб-страницы в одном месте.
Это работает следующим образом: вы можете сгруппировать селекторы, вложенные друг в друга, что означает, что вы одновременно применяете к элементу несколько стилей обработки и сохраняете все это организованным, а также его легче читать.
Для упрощения, когда вы вкладываете определенные элементы вместе, они применяются только к элементу, выбранному непосредственно перед ними.
Например, если вы хотите изменить размер шрифта заголовков и подзаголовков на 16 пикселей, но при этом хотите выделить для всех абзацев, подпадающих под элемент h2, определенный цвет шрифта, вы можете вложить его следующим образом:
div > h2 font-size: 16px; > div > h2 + p color: red; > В приведенном выше синтаксисе вы ориентируетесь как на элементы h2, так и на элементы p, которые появляются сразу после элемента h2.
Довольно аккуратно, правда?
Выбор потомков, дочерних комбинаторов и amp; Общие братья и сестры
Когда дело доходит до вложенных селекторов CSS, ключевое значение имеет понимание различных комбинаторов.
Они являются связующим звеном между селекторами и элементами и позволяют определять отношения между ними.
Вот три наиболее распространенных комбинатора: потомок, дочерний элемент и общий комбинатор родственных элементов.
Потомки
Комбинатор потомков используется для выбора всех элементов, являющихся потомками указанного родительского элемента.
Например, если вы хотите стилизовать все теги
внутри , вы должны использовать селектор потомков следующим образом:
Это приведет к тому, что все теги
внутри блока div будут выделены полужирным шрифтом, независимо от того, насколько глубоко они вложены в этот блок.
Дочерний комбинатор
Дочерний комбинатор выбирает элементы, которые являются прямыми потомками своего родительского элемента, другими словами, элементы, между которыми и их родителем нет других элементов.
Это приведет к тому, что полужирным шрифтом будут выделены только те теги
, между которыми нет других элементов и их родительским div, а не те, которые вложены глубже, чем этот div.
Общий комбинатор родственных элементов
Комбинатор General Sibling используется для выбора элементов, имеющих общего родителя и следующих за указанным элементом.
Это сделает все теги
, идущие после , выделенными полужирным шрифтом.
Чтобы использовать этот селектор, элементы и
должны иметь один и тот же родительский элемент.
Вложенные селекторы – это мощный инструмент для быстрой и эффективной стилизации элементов.
Это не только сэкономит ваше время при создании веб-сайта или веб-приложения, но также сделает код более читабельным и упорядоченным.
Кроме того, когда вы разберетесь в различных комбинаторах и синтаксисе, используемых во вложенных селекторах, вы сможете легко создавать сложные правила CSS.
Распространенные ошибки при группировании & Вложенные селекторы
Теперь, когда вы знаете основы группировки и вложения селекторов, давайте рассмотрим некоторые распространенные ошибки, которых следует избегать при написании правил CSS. Ведь лучше сделать все правильно с первого раза!
Чрезмерное вложение
Одна из ошибок, которую люди часто совершают при написании вложенных селекторов, заключается в чрезмерной вложенности или соединении слишком большого количества селекторов вместе. Это может привести к чрезмерно сложному и неэффективному коду, а также снижению производительности.
По возможности старайтесь использовать сокращенную запись, например > , вместо цепочки имен отдельных селекторов.
ul li a span color: red; > В приведенном выше примере стиль применяется к элементу span , вложенному в элемент a , который сам вложен в элемент li . элемент, вложенный в элемент ul .
Этот селектор очень специфичен и применяет стиль только к элементам, которые соответствуют всем этим критериям.
Неправильно структурированные селекторы
Еще одна ошибка, которую иногда совершают новички, заключается в неправильной структуре своих селекторов, например вложении дочернего элемента в другой элемент без включения родительского элемента в селектор.
Это может привести к неожиданному поведению в некоторых браузерах, поэтому обязательно включайте все родительские элементы во вложенные правила.
Переопределение стилей
При использовании вложенных селекторов также необходимо соблюдать осторожность, чтобы не переопределить стили родительских элементов.
Например, если у вас есть родительское правило, устанавливающее размер шрифта для всех тегов
, а затем вложенное правило, определяющее размер шрифта только для одного
, вложенное правило переопределит родительское правило только для этого элемента, а это означает, что любые другие теги
по-прежнему будут использовать размер шрифта, установленный родительским правилом.
Рекомендации по группировке & Вложенные селекторы
Если вы новичок, вам может быть интересно, почему вложение и группировка селекторов CSS так важны. Ну, это просто — они упрощают поддержку и обновление вашего кода.
Вот несколько рекомендаций, которые следует учитывать при вложении и группировании селекторов:
Поддерживайте чистоту селекторов
При написании вложенных селекторов оставляйте в селекторе только необходимые части. Старайтесь избегать слишком многословных выделений, содержащих слишком много элементов и имен классов.
Это сделает ваш код намного чище и проще в управлении в долгосрочной перспективе.
Избегайте повторений
Лучше меньше повторений в коде. Для этого используйте общие родительские классы или идентификаторы для элементов с общими стилями.
Это поможет сократить написанный код и позволит легко стилизовать элементы в дальнейшем; будь то добавление новых элементов или изменение существующего.
Разбить селекторы на группы
При объединении селекторов в цепочку разбивайте их на группы с запятыми между ними для четкого разделения элементов.
Группировка связанных селекторов помогает более эффективно структурировать их, чтобы все было удобно расположено вместе, не теряя ни смысла, ни смысла.
Следуя этим простым советам и приемам, вы вскоре с легкостью освоите вложенные селекторы CSS!
Заключение
Если вы только начинаете работать с вложенными селекторами CSS, навигация по их многочисленным хитросплетениям может показаться пугающей.
Но при должной практике, понимании и изучении лучших советов и приемов вы быстро окажетесь на пути к написанию более эффективного и действенного кода.
Начните с ознакомления с основами селекторов CSS, их группировки и вложения. Практикуйтесь и экспериментируйте с различными сценариями и контекстами.
И самое главное, творите и получайте удовольствие! Используя всего несколько простых стратегий и приемов, вы в кратчайшие сроки станете писать код как профессионал.
Подробнее
- Стили горизонтальных правил в CSS: стиль тега hr в 2023 году
- 13 должны посетить веб-сайты, чтобы узнать и освоить CSS в 2023 году
- Руководство по цвету CSS функции (rgb(), hsl(), rgba(), hsla()) в 2023 году
Группировка селекторов
Для того, чтобы уменьшить количество кода после компиляции, а также упростить работу с селекторами, в 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
За фигурными скобками, в левой части CSS правила я написал CSS селекторы, при помощи которых отбираются нужные элементы, на которые будет распространяться данное CSS правило. Поскольку нам необходимо объединить CSS селекторы, мы разделяем их запятой. Таким образом, CSS стиль, который написан в фигурных скобках будет применен ко всем отобранным элементам, то есть цвет текста всех этих элементов примет значение #1394ef. Запята сообщает браузеру о том, что в правило включено несколько элементов, если запятую не ставить, то правило будет иметь немного другое значение, но об этом позже.
Ограничений по числу группируемых CSS селекторов нет, вы можете сгруппировать два HTML элемента, а можете отобрать и применить CSS правило для всех HTML элементов на странице. Группировка CSS селекторов позволяет существенно упростить разработку и оформление HTML документов, а также существенно уменьшить объем набираемого кода, например, вам необходимо, чтобы все заголовки на странице были одного цвета, вы можете создать для каждого заголовка отдельное CSS правило:
А можете сгруппировать CSS селекторы и ваш код существенно уменьшится:
Вы можете группировать различные 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.
Тогда браузер интерпретирует запись следующим образом:
font: 12px Arial;
color: orange background: gray;
Размер текста и шрифт будут такими, как указано в записи, поскольку здесь написано все правильно. Но, background не является правильным значением для атрибута color, а еще для атрибута color можно присвоить только одно значение, поэтому браузер проигнорирует CSS объявление color. Поэтому вы не увидите ни оранжевого цвета, ни серого фона. Для этих элементов будет задан стиль, который прописан в браузере по умолчанию, чаще всего это черный цвет и белый фон.
Но вы можете не завершать последнее объявление точкой с запятой, браузер поймет вас правильно и отобразит элементы так, как хотите вы, но правила хорошего тона требуют ставить точку с запятой после каждого CSS объявления. Группировка селекторов CSS и группировка CSS объявлений помогает уменьшить объем кода и сделать его более понятным, что соответственно ведет к уменьшению времени загрузки ваших страниц и снижению нагрузки на сервер.
Группировка CSS селекторов и объявлений
Помимо того, что в CSS можно осуществлять группировку CSS селекторов и CSS объявлений, можно группировать сразу и CSS селекторы и CSS объявления вместе. Это позволяет уменьшить объем кода и сделать каскадные таблицы стилей еще более понятными. Таким образом, мы можем создавать сложные CSS стили, при этом напечатав немного кода. Предположим, что мы хотим задать несколько одинаковых стилей для всех заголовков в HTML документе. Это можно сделать так:
h1, h2, h3, h4, h5, h6
font: 18px Arial;
border-bottom: 1px solid;
Попробуем в этом убедиться, для этого создадим простой HTML документ, в котором создадим 6 заголовков от до :