Как указать несколько классов 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. Использование братского селектора

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

        Атрибут class

        Атрибут class задает один или несколько классов для элемента (под элементом имеется ввиду тег).

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

        Существует также атрибут id, который подобно атрибуту class позволяет выбирать элементы на HTML странице.

        Разница между атрибутом class и атрибутом id в том, что class выбирает группу элементов (даже если он дан одному элементу — его в последствии можно дать и другому), а id выбирает уникальный элемент (больше элемента с таким id не должно быть на странице сайта, иначе будет конфликт).

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

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

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

        Имена классам следует давать на английском языке (а не на русском, просто английскими буквами!). Имена должны быть осмысленными, отражать суть класса.

        Пример

        Давайте всем абзацам с классом test зададим красный цвет текста:

        Абзац с классом test.

        Контрольный абзац без класса.

        .test < color: red; >

        Пример . Несколько классов для элемента

        А здесь давайте первому абзацу зададим несколько классов — test1 и test2 (запишем их через пробел). Класс test1 задает красный цвет тексту, а класс test2 задает размер шрифта в 20px . Второму абзацу дан только класс test1 (этот абзац станет красным), а третьему абзацу — класс test2 (этот абзац будет иметь размер шрифта в 20px). Первый абзац, у которого два класса, будет иметь одновременно и красный цвет и размер шрифта в 20px :

        Абзац с двумя классами test1 и test2.

        Абзац с классом test1.

        Абзац с классом test2.

        Контрольный абзац без классов.

        .test1 < color: red; >.test2 < font-size: 20px; >

        Множественные классы

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

        Прост сообщение.
        Оши-ы-ы-бка! Всё пропа-а-а-ло!

        У них все стили кроме фона одинаковые. Фон обычных сообщений серый, фон ошибок красный. Стили для этих уведомлений можно организовать так:

        .alert < /* свойства для рамок, отступов и так далее */ background-color: lightgrey; > .alert-error

        Класс alert с общими стилями есть у всех сообщений. Класс alert-error с частными стилями есть только у ошибок. Помните: несколько классов в атрибуте class задаются через пробел.

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

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

        Использование однотипных селекторов (например, по классам) позволяет использовать самый простой механизм разрешения конфликтов — по порядку в коде. Размещаем частные CSS-правила после общего, и всё что нужно точно переопределится.

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

        Перейти к заданию

        • index.html Сплит-режим
        • style.css Сплит-режим

        Сайт начинающего верстальщика

        Сайт начинающего верстальщика

        Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.

        Моё первое задание — вести дневник и честно писать обо всех своих свершениях.

        Навыки

        HTML

        CSS

        JS

        Подвал сайта

        Как добавить в html-элемент несколько классов?

        Чтобы добавить в html-элемент несколько классов, можно воспользоваться методом classList.add() у элемента. Этот метод может принимать любое количество параметров. Каждый из этих параметров должен быть строкой — это имя класса, которое нужно добавить:

        // создаём новый элемент const el = document.createElement('div'); // добавляем классы el.classList.add('first', 'second'); // После всех изменений el.className; // first second 

        Также можно добавлять классы отдельными вызовами метода:

        // создаём новый элемент const el = document.createElement('div'); // добавляем первый класс el.classList.add('first'); // добавляем второй класс el.classList.add('second'); // После всех изменений el.className; // first second 

        Имена классов должны соответствовать правилам именования, то есть, например, не должны содержать пробельные символы. Такой код выдаст ошибку:

        const el = document.createElement('div'); el.classList.add('first second'); // ошибка! Имя класса задано неверно 

        14 марта 2023

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

        document.body.className = 'page page--contact theme-light'; 

        Каждый раз мы запиcываем новые значение в атрибут класса. Бывает удобно при создании элемента. Или, наоборот, можем быстро удалить все классы указав className = » .

        document.body.className = '' // удаляем все классы 

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

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