Как обратиться к классу в css

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

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

Синтаксис

.classname

Это эквивалентно следующему селектор по атрибуту :

[class~=classname]

Пример

CSS

span.classy  background-color: DodgerBlue; > 

HTML

span class="classy">Здесь span с каким-то текстом.span> span>А тут другой span.span> 

Спецификации

Specification
Selectors Level 4 # class-html

Поддержка браузерами

BCD tables only load in the browser

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

CSS обращение к классу элемента по класу самого же элемента (не знаю как правильнее задать вопрос)

.btn .tiby <. >Вы тут написали tiby думаю просто ошиблись. И поставили пробел между классами. Если есть пробел между классами, то это означает что Вы задаете стили для элемента .tiny расположенного внутри блока .btn

24 мар 2020 в 10:07
.btn.tiny < . это для . , а .btn .tiny < . это для 24 мар 2020 в 10:09 24 мар 2020 в 10:12

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

В CSS можно как можно более точнее указывать, к какому элементу нужно обращаться.
В вашем случае, можно использовать связку классов, выглядеть это будет так: .btn.tiny <. >.

.tiny < /* Уберёт подчёркивание у всех ссылок с классом .tiny */ text-decoration: none; >/* Но элементу с классом btn tiny мы хотим добавить подчёркивание */ .btn.tiny

btn tiny | link tiny

Можно даже использовать атрибуты, но это уже другая история.

Отслеживать
ответ дан 24 мар 2020 в 10:11
23.5k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Обращение к классам CSS. Как правильнее?

Суть вопроса заключается в том, что как синтаксически (в плане требований к коду и удобства) правильнее обращаться, например к классу .more_text?
Так (если ничего не путаю, то называется это вложенностью, если нет — поправьте):

.more .more_text

.more_text

• Вопрос задан более трёх лет назад
• 5234 просмотра

4 комментария

Простой 4 комментария

Rustam Bainazarov @SmthTo Куратор тега CSS
Как угодно. Зависит от задачи. Изучайте специфичность. Чем меньше вложенности — тем лучше.

Виталий Першин @Get-Web Куратор тега CSS

.more .more_text

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

Аркадий Суздальцев @arktoday Автор вопроса
Аркадий Суздальцев @arktoday Автор вопроса
Решения вопроса 2

Александр @Seasle Куратор тега CSS

Можно .more_text < . >, главное чтобы класс был уникален. Также, если имеется вложенность, то при добавлении media -запросов необходимо будет повторять полную вложенность.

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать

Не смотря на то что css — это каскадная таблица стилей, этот самый каскад рекомендуется использовать по минимуму. Ознакомьтесь с методологией БЭМ или стилевыми модулями.

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

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 1
vitalyDinDin @vitalyDinDin

Если «more_text» уникален на все сайте, то можно напрямую обращаться к нему, просто «.more_text». Если не уникален, то «.more .more_text».

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• HTML
• +2 ещё

Не работает overflow: auto, как решить эту проблему?

• 1 подписчик
• 14 минут назад
• 2 просмотра

Классы в CSS

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

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

Такое решение есть и оно называется «классы»!

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

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

Класс — это всего лишь один из атрибутов HTML-тегов, например:

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

.important < color: red; >— выберет все теги с классом "important" .help < color: green; >— выберет все теги с классом "help"

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

Имя класса может содержать в себе латинские символы, цифры, символ дефиса — и подчёркивания _ и начинаться оно должно с латинского символа.

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

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

Конспект курса

Парные теги.

Одиночные теги.

Атрибуты тегов.

Инлайновые (встроенные) стили.

Внешние стили.

Стилизация по классам.

body < font-family: "Tahoma", serif; >h1 < color: #999999; >strong < color: green; >em < color: red; >.learned-ok < color: green; >.learning-in-progress < color: orange; >.not-learned < color: red; >
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ

Спасибо! Мы скоро всё исправим)

Автозапуск

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

Увеличить 100% Уменьшить
Задачи Выполнено

Переделываем всё c нормальными классами:

1. Для начала удалите из HTML-кода все strong и em , чтобы внутри p остался только текст .
2. Первым четырём абзацам добавьте класс learned-ok .
3. Пятому абзацу добавьте класс learning-in-progress .
4. Шестому абзацу добавьте класс not-learned .

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

• Наша группа в ВК
• Наша страница в Twitter
• Наш канал в Telegram

Практикум

• Курсы для новичков
• Подписка
• Для команд и компаний
• Учебник по PHP

Профессии

• Фронтенд-разработчик
• JavaScript-разработчик
• Фулстек-разработчик

• HTML и CSS.
  Профессиональная вёрстка сайтов
• HTML и CSS.
  Адаптивная вёрстка и автоматизация
• JavaScript.
  Профессиональная разработка веб-интерфейсов
• JavaScript.
  Архитектура клиентских приложений
• React.
  Разработка сложных клиентских приложений
• Node.js.
  Профессиональная разработка REST API
• Node.js и Nest.js.
  Микросервисная архитектура
• TypeScript. Теория типов
• Алгоритмы и структуры данных
• Паттерны проектирования
• Webpack
• Vue.js 3. Разработка клиентских приложений
• Git и GitHub
• Анимация для фронтендеров

• Учебник по Git
• Справочник по HTML
• Истории успеха

Информация

• Об Академии
• О центре карьеры