Css два класса у одного элемента: Как применить два класса CSS к одному элементу

Содержание

Как применить два класса CSS к одному элементу

Могу ли я применить 2 класса к одному div или span или любому элементу html? Например:

<a>aa</a>

Я попробовал, и в моем случае c2 не применяется. Как я могу применить оба класса одновременно?

html

css

Поделиться

Источник


dojoX    

30 марта 2011 в 06:25

7 ответов

  • как применить два вида css к одному элементу управления, один для интернета explorer, другой для firefox и chrome

    как применить два вида css к одному элементу управления, один для интернета explorer, другой для firefox и chrome просто в интернете explorer contentplaceholder перемещается в другое место сегодня, в прошлые дни никаких проблем <div id=content style=margin-top:28px; margin-left: 240px;…

  • Как применить внешний CSS к элементам вспомогательного класса Html?

    Я использую DropDownList(), TextArea(), TextBox(), ListBox() на своей странице aspx. Я хочу применить к нему внешний CSS, а не встроенный CSS. И я не хочу применять использование Id/Class., так как же применить внешний CSS к элементу вспомогательного класса HTML по его имени?


168

1) Используйте несколько классов внутри атрибута класса, разделенных whitespace ( ref ):

<a>aa</a>

2) Для целевых элементов, содержащих все указанные классы, используйте этот селектор CSS ( без пробела ) ( ref ):

.c1.c2 {
}

Поделиться


Salman A    

30 марта 2011 в 06:27


15

Включите обе строки класса в одно значение атрибута класса с пробелом между ними.

<a > aa </a>

Поделиться


Steve Jorgensen    

30 марта 2011 в 06:27


12

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

Однако знание того, как работают селекторы, также полезно.

Рассмотрим этот фрагмент HTML…

<div></div>
<div></div>
<div></div>

Использование .a { ... } в качестве селектора позволит выбрать первый и третий. Однако, если вы хотите выбрать тот , который имеет как a , так и b, вы можете использовать селектор .a.b { ... } . Обратите внимание, что это не будет работать в IE6, он просто выберет .b (последний).

Поделиться


alex    

30 марта 2011 в 06:43

Поделиться


user2757598    

07 сентября 2013 в 18:47


5

Это очень ясно, что для добавления двух классов в один div сначала необходимо сгенерировать классы, а затем объединить их. Этот процесс используется для внесения изменений и уменьшения количества классов. Те, кто делает сайт с нуля, в основном использовали этот тип методов. они делают два класса: первый класс-для цвета, а второй-для настройки ширины, высоты, стиля шрифта и т. Д.
Когда мы объединяем оба класса, то первый класс и второй класс
действуют.

.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}
<div>orderlist</div>

Поделиться


vivek Khanna    

05 мая 2016 в 20:03


4

Разделите их пробелом.

<div></div>

Поделиться


Aravind Suresh    

14 августа 2016 в 12:04


0

.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}
<div>orderlist</div>
.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}
<div>orderlist</div>
.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}
<div>orderlist</div>

Поделиться


Abhay shah    

10 августа 2017 в 10:50

  • Как применить функцию только к одному элементу в подсписке во всех подсписках?

    Как применить функцию только к одному элементу в одном индексе во всех подсписках, оставив все остальные элементы в подсписках одинаковыми? Например: Original_List = [[‘a’,1388547232,’b’,’c’,’d’],[‘y’,13234542299,’d’,’c’,’d’],[‘z’,1388547432,’b’,’c’,’d’]] Я хотел бы применить функцию только к…

  • Как применить CSS к внутреннему элементу Iframe через родительское окно класса CSS?

    У меня есть родительская (главная) страница, которая имеет несколько разделов iframe . И я хочу, чтобы применить стиль css, чтобы внутренний элемент iframe . Когда я искал его в Google, я обнаружил, что многие сообщения относятся к этой теме, но все они предлагают использовать jquery/javascript…

Похожие вопросы:

Используйте javascript для случайного добавления класса CSS к одному элементу списка

Эй, у меня нет никакого кода, потому что я не знаю, как это сделать. Я хочу использовать jQuery / javascript для случайного добавления класса CSS active к одному элементу списка в неупорядоченном…

Как применить список функций lambda к одному элементу с помощью итератора?

Я хочу применить список функций lambda к одному элементу, используя итерацию, которая должна быть создана с помощью yield. Список функций lambda будет иметь что-то вроде: [<function…

Применяйте стили только к одному элементу

Я включаю стили обычным способом, как это: <link rel=stylesheet href=/css/boostrap.css type=text/css /> этот стиль имеет много стилей, которые разрушают мой основной вид, он применяется к…

как применить два вида css к одному элементу управления, один для интернета explorer, другой для firefox и chrome

как применить два вида css к одному элементу управления, один для интернета explorer, другой для firefox и chrome просто в интернете explorer contentplaceholder перемещается в другое место сегодня,…

Как применить внешний CSS к элементам вспомогательного класса Html?

Я использую DropDownList(), TextArea(), TextBox(), ListBox() на своей странице aspx. Я хочу применить к нему внешний CSS, а не встроенный CSS. И я не хочу применять использование Id/Class., так как…

Как применить функцию только к одному элементу в подсписке во всех подсписках?

Как применить функцию только к одному элементу в одном индексе во всех подсписках, оставив все остальные элементы в подсписках одинаковыми? Например: Original_List =…

Как применить CSS к внутреннему элементу Iframe через родительское окно класса CSS?

У меня есть родительская (главная) страница, которая имеет несколько разделов iframe . И я хочу, чтобы применить стиль css, чтобы внутренний элемент iframe . Когда я искал его в Google, я обнаружил,…

Как я могу применить таблицу стилей css к одному конкретному элементу?

Я новичок в веб-разработке, я попробовал таблицу стилей css с простым элементом HTML, и она хорошо работала, когда я указывал имя элемента: label { color: green; } это будет применяться ко всем…

Как применить css к элементу DOM с тем же именем класса

Как применить css к элементу, имеющему один и тот же класс name.i хотите применить css к обоим как я могу это сделать? Я стараюсь много раз, но не сделать это правильный путь. <div…

Как применить два ngIf к одному элементу html с двумя различными условиями

Как применить два ngIf к одному элементу html с двумя различными условиями, такими как div class=sidebar *ngIf=!this.router.url === ‘/login’> <!— *ngIf=!route.isActive(‘/signup’ || ‘/login’) …

Как использовать несколько классов CSS на одном элементе

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

E + / Getty Images

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

Хотя идентификаторы или классы работают с целью привязки к ним с помощью правил CSS, современные методы веб-дизайна отдают предпочтение классам по сравнению с идентификаторами, отчасти потому, что они менее специфичны и с ними проще работать в целом.

Один или несколько классов в CSS?

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

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

Например, этот параграф имеет три класса:

<p class = "pullquote Featured left"> Это будет текст абзаца </ p>

Это устанавливает следующие три класса для тега абзаца:

  • Pullquote
  • Рекомендуемые
  • Оставили

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

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

.pullquote {...} 
.featured {...} 
p.left {...}

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

Если вы устанавливаете класс для определенного элемента (например,  p.left ), вы все равно можете использовать его как часть списка классов; однако следует помнить, что это повлияет только на те элементы, которые указаны в CSS. Другими словами, стиль p.left будет применяться только к абзацам с этим классом, поскольку ваш селектор на самом деле говорит применить его к «абзацам со значением класса left ». Напротив, два других селектора в примере не указывают определенный элемент, поэтому они будут применяться к любому элементу, который использует эти значения класса.

Преимущества нескольких классов

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

оставили

и

верно

просто

плыть налево;

и

плавать: право;

в них. Затем, когда у вас есть элемент, который вам нужно перемещать влево, вы просто добавляете класс «left» в его список классов.

Однако здесь есть тонкая грань для прогулок. Помните, что веб-стандарты диктуют разделение стиля и структуры. Структура обрабатывается с использованием HTML, а стиль в CSS. Если ваш HTML-документ заполнен элементами, у всех из которых есть имена классов, такие как «красный» или «левый», то есть имена, которые определяют, как элементы должны выглядеть, а не как они есть, вы пересекаете эту границу между структурой и стилем. 

Несколько классов, семантика и JavaScript

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

Примените новые классы к существующим элементам, используя JavaScript, не удаляя ни один из начальных классов. Вы также можете использовать классы для определения семантики элемента — добавьте дополнительные классы, чтобы определить, что этот элемент означает семантически. Этот подход — то, как Микроформаты работают.

Недостатки нескольких классов

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

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

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

Атрибут class — классы элемента

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

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

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

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

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

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

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

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

Пример

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

<p>Абзац с классом test.</p>
<p>Контрольный абзац без класса.</p>
.test {
color: red;
}

:

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

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

<p>Абзац с двумя классами test1 и test2.</p>
<p>Абзац с классом test1.</p>
<p>Абзац с классом test2.</p>
<p>Контрольный абзац без классов.</p>
.test1 {
color: red;
}
.test2 {
font-size: 20px;
}

:

Изучаем селекторы в CSS

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

В этой статье мы рассмотрим способы определения стилей веб-страницы с помощью селекторов классов, селекторов потомков, псевдоклассов и селекторов идентификаторов.

Для примера нам нужен только один HTML-файл и таблица стилей CSS. Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Селекторы CSS</title>
    <link rel='stylesheet' href='styles.css'/>
  </head>
  <body>
    <h2> Селекторы CSS</h2>
    <p>Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
       Это <strong>супер</strong> полезно.</p>
    <p>Классы чрезвычайно важны, так как они позволяют выбрать
       произвольные блоки на странице.</p>
    <p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
       <a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
    <div>Кнопка Один</div>
  </body>
</html>

Теперь создадим в той же папке файл styles.css. Это все, что понадобится для изучения CSS селекторов.

Селекторы классов позволяют применять стили CSS к определенному элементу HTML. Они дают возможность различать элементы HTML одного и того же типа. Например, когда есть два элемента <div>, но необходимо задать стили только для одного из них. Для селекторов классов нужны:

  • Указанный атрибут класса в элементе HTML;
  • Соответствующий селектор классов CSS.

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

<p> Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML. Это <strong>супер</strong> полезно.</p>

Теперь стилизуем абзац <p class=’synopsis’> в файле CSS с помощью следующего кода:

.synopsis {
  color: #7E8184;        /* Светло серый */
  font-style: italic;
}

Это правило применяется только к элементам с соответствующим атрибутом класса. Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов:

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

Добавление атрибута class не изменяет смысловое значение HTML-документа и служит для подключения CSS. Рекомендуется избегать имен классов, основанных на том, как они отображаются. Использование чего-то более семантического, например, .synopsis, дает больше свободы в действиях. Что позволяет настроить отображение этого абзаца.

Атрибут class применяется не только к элементам <p> — он может быть использован для любого элемента HTML. Взяв на вооружение селекторы классов CSS, можно сделать блоки <div> и <span> намного более полезными. Мы можем использовать их для создания, как отдельных элементов, так и произвольных разделов веб-страницы:

Начнем с отдельных элементов. На этот раз мы будем использовать класс вместо CSS селектора div. Добавьте следующий код в файл styles.css:

.button {
  color: #FFF;
  background-color: #5995DA;    /* Синий */
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;    /* Темно-серый */
  border-radius: 5px;
  width: 200px;
  margin: 20px auto;
}

Конечно, для этого нам нужен соответствующий атрибут класса. Измените <div> в файле selectors.html на следующий код:

<div>Кнопка Один</div>

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

Помните, что <div> не изменяет семантическую структуру страницы. Это делает его отличным инструментом для определения представляемой структуры веб-страницы. Обертывая HTML-элементы в теги <div>, можно создать сайт с помощью более крупных фрагментов, не влияя на то, как поисковые системы просматривают наш контент:

Попробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в <div> и присвойте ему уникальный класс:

<body>
<div>  <!-- Добавьте это -->
<h2> Селекторы CSS</h2>
    <p >Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
       Это <strong>супер</strong> полезно.</p>
    <p>Классы чрезвычайно важны,, так как они позволяют выбрать
       произвольные блоки на странице.</p>
    <p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
       <a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
    <div>Кнопка Один</div>
</div>  <!-- Добавьте это -->
</body>
Затем добавьте следующий код в файл styles.css:
.page {
  width: 600px;
  margin: 0 auto;
}

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

Именно таким образом определяются более сложные макеты веб-страниц. Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой <div> с классом .sidebar.

Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы <div>, ничего из этого не было бы возможно.

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

<div>Кнопка Один</div>
<div>Кнопка Два</div>

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

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

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

<div>Кнопка Два</div>

Этому элементу теперь присвоено два разных класса, и можно использовать любой из них для определения стилей. Это дает некоторые дополнительные возможности. Можно задать для второй кнопки стили класса .button и стили, относящиеся только к этой кнопке класса .call-to-action (обязательно добавьте этот код после правила .button):

.call-to-action {
  font-style: italic;
  background-color: #EEB75A;    /* Желтый */
}

Хочу обратить ваше внимание на две важные вещи, касающиеся нашей второй кнопки:

  • Это добавление нового объявления по сравнению с исходным правилом .button — font-style;
  • Переопределение существующего в классе .button стиля — background-color.

Переопределение дочерних селекторов в CSS происходит из-за порядка размещения правил .call-to-action и .button в таблице стилей. Когда в файле CSS есть два противоречащих друг другу свойства, всегда применяется то, которое указано последним. Если бы вы разместили .call-to-action перед .button, применялось бы это правило, и кнопка осталась бы синей.

Это означает, что порядок атрибутов класса в HTML-элементе не влияет на поведение переопределения. Несколько классов в одном элементе применяются «одинаково», а приоритет определяется исключительно порядком размещения правил в файле styles.css.

Другими словами, следующие элементы эквивалентны:

<!-- В результате элементы будут отображаться на странице одинаково -->
<div>Кнопка Два</div>
<div>Кнопка Два</div>

Возможно, вы заметили, что <em> в нашем первом абзаце больше нельзя отличить от остального текста абзаца, так как правило .synopsis задает отображение курсивом всего текста абзаца.

Чтобы изменить этот элемент <em>, можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS. То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:

Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент <em> в абзаце .synopsis со следующими стилями:

.synopsis em {
  font-style: normal;
}

Добавление этого правила в файл styles.css задаст отображение <em> вертикальными (римскими) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац <p>. При этом остальных элементов <em>, размещенных на странице это изменение не коснется:

Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы <em> внутри заголовков:

h2 em {
  /* определенные стили */
}

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

/* Старайтесь избегать такого */
.article h3 .subheading em {
  /* Конкретные стили */
}

Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML:

<div>
  <h3>
    <span>Это <em>на самом деле</em> особенный текст.</span>
  </h3>
</div>

Если захотите применить эти стили к заголовку <h3>, который не был обернут в тег <div class = ‘article’>, придется здорово поломать голову. Та же ситуация, если вы захотите применить их к заголовку <h4>.

До сих пор все селекторы CSS, которые мы рассматривали, были связаны непосредственно с фрагментами HTML-разметки. Тем не менее, на отображаемой веб-странице происходит больше, чем задает HTML-контент. Существует «стандартный» перечень действий, которые может предпринять пользователь.

Классический пример — это ссылка. Веб-разработчик создает элемент <a href>. После того как браузер отобразил его, пользователи могут взаимодействовать с этой ссылкой: навести на нее курсор мыши, кликнуть ссылку и перейти по ней:

Псевдоклассы CSS предоставляют механизм для подключения к таким действиям пользователя. В любой момент времени элемент <a href> может находиться в нескольких состояниях, и можно использовать псевдоклассы для определения отдельных стилей для каждого из этих состояний. Можно представить их как селекторы классов, которые не нужно писать самостоятельно, потому что они встроены в браузер.

В отличие от CSS селекторов псевдоклассы начинаются с двоеточия, за которым следует имя класса. Наиболее распространенными псевдоклассами ссылок являются:

  • :link — ссылка, по которой пользователь еще не переходил;
  • :visited — ссылка, по которой пользователь переходил раньше;
  • :hover — ссылка, на которую пользователь навел курсор мыши;
  • :active — ссылка, нажатая мышью (или пальцем).

Рассмотрим эти псевдоклассы, добавив следующие правила в CSS (также обратите внимание на то, что мы используем для обозначения цветов ключевые слова, а не шестнадцатеричные коды):

a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  color: aqua;
  text-decoration: underline;
}
a:active {
  color: red;
}

Приведенный выше фрагмент кода отлично подходит для большинства сайтов, но давайте более внимательно рассмотрим поведение a:visited, когда мы изменим атрибут href на URL-адрес, который раньше посещали. Стиль a:hover применяется как к ранее посещенным ссылкам, так и к тем, по которым мы еще не переходили. Можно еще больше модифицировать ссылки, объединив псевдоклассы.

Добавьте это правило ниже предыдущего фрагмента кода:

a:visited:hover {
  color: orange;
}

Данный код создает специальный стиль для состояния при наведении курсора мыши на посещенные ранее ссылки. Наведя курсор на не посещенную ранее ссылку, мы увидим, что она «перекрашивается» в аквамариновый цвет. А при наведении курсора на посещенную ссылку она становится оранжевой. Фантастика! Но это ломает наш стиль a:active из-за некоторых внутренних аспектов CSS, о которых вы никогда не захотите читать. Когда вы нажмете на ссылку, она больше не будет становиться красной.

Можно исправить это с помощью CSS псевдоселектора a:visited:active. Добавьте следующий код в конец таблицы стилей. Обратите внимание, что, как и в случае с классом .call-to-action, порядок, в котором правила определяются в файле styles.css, имеет значение:

a:visited:active {
  color: red;
}

Эти два последних раздела позволят задавать стили посещенных ссылок полностью отдельно от не посещенных.

Псевдоклассы предназначены не только для определения стилей ссылок. Вместо указания стилей для класса a:link и потомков изменим с помощью псевдоклассов класс .button. Это позволит создавать кнопки, которые ведут куда-то.

Сначала нужно изменить кнопки, чтобы они стали элементами <a href>, а не просто элементами <div>, как показано ниже:

<a href='nowhere.html'>Кнопка Один</a>
<a href='nowhere.html'>Кнопка Два</a>

Если вы перезагрузите документ в браузере, то увидите, что некоторые стили больше не действуют. Хотя мы используем одни и те же классы. Это связано с тем, что <a> является встроенным элементом, а также имеет значение цвета по умолчанию:

Нам нужно снова сделать этот элемент блочным и удалить часть стилей ссылок по умолчанию.

Начнем с :link и :visited. Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:

.button:link,                 /* Измените это */
.button:visited {             /* Измените это */
  display: block;             /* Добавьте это */
  text-decoration: none;      /* Добавьте это */
  color: #FFF;                /* Все остальное остается без изменений */
  background-color: #5995DA;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;
  border-radius: 5px;
  width: 200px;
  margin: 20px auto;
}

Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы. Теперь оформим состояние при наведении курсора.

.button:hover,
.button:visited:hover {
  color: #FFF;
  background-color: #76AEED;  /* Light blue */
}

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

.button:active,
.button:visited:active {
  color: #FFF;
  background-color: #5995DA;  /* Blue */
}

Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу, и вы превратите его в интерактивную кнопку.

Займемся второй кнопкой. Предполагается, что она имеет желтый фон, но мы изменили это кодом из предыдущего раздела. Наш селектор .button:link более «специфичен», чем текущее правило .call-to-action, поэтому он имеет приоритет.

Исправим такое положение вещей, применив к нашему правилу .call-to-action несколько псевдоклассов. Замените существующее правило следующим (убедитесь, что это определено после новых стилей .button из предыдущего раздела о дочерних селекторах в CSS):

.call-to-action:link,
.call-to-action:visited {
  font-style: italic;
  background-color: #EEB75A;     /* Желтый */
}
.call-to-action:hover,
.call-to-action:visited:hover {
  background-color: #F5CF8E;     /* Светло-желтый */
}
.call-to-action:active,
.call-to-action:visited:active {
  background-color: #EEB75A;     /* Желтый */
}

Мы назначили класс .call-to-action только для второй кнопки, поэтому только она станет желтой. Конечно, нам по-прежнему нужно, чтобы класс .button был назначен для обоих элементов <a>, поскольку он определяет общие стили, такие как отступы, радиус границы и размер шрифта.

Состояния ссылок – это лишь один аспект псевдоклассов. Существует также множество других псевдоклассов, которые предоставляют дополнительную информацию о контексте элемента. Например, псевдокласс last-of-type выбирает последний элемент определенного типа в родительском элементе. Это является альтернативой селекторам классов.

Например, мы могли бы использовать :last-of-type, чтобы добавить в наш пример определенное пространство после последнего абзаца страницы:

p:last-of-type {
  margin-bottom: 50px;
}

Это позволяет не затрагивать первые два элемента <p> на странице, не добавляя для последнего абзаца новый атрибут класса:

Можно даже использовать псевдокласс :first-of-type вместо класса .synopsis. Заменив существующее правило .synopsis следующим фрагментом кода, мы получим тот же результат:

p:first-of-type {
  color: #7E8184;
  font-style: italic;
}

Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом <p>. Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов <p> в <div class=’synopsis’>, нам пришлось бы переписать наш CSS-код. С другой стороны, псевдоклассы позволяют задавать стили для определенных элементов, не изменяя HTML. Это дает нам четкое разделение контента от представления.

Но псевдоклассы немного сложнее. Контекстные селекторы CSS first-of-type и last-of-type действуют только внутри своего родительского элемента. Другими словами, p:first-of-type выбирает первый элемент <p> в каждом элементе контейнера.

У нас есть один общий <div>, который обертывает контент (.page), поэтому для нас это не проблема. Но что произойдет, если мы добавим следующий код в нижнюю часть элемента .page:

<div>
  <p>If this page had a sidebar...</p>
  <p>We’d have some problems with pseudo-classes.</p>
</div>

Это иллюстрирует сложность применения псевдоклассов для структуры. Первый элемент <p> здесь также будет соответствовать p:first-of-type, потому что область применения псевдокласса ограничена родительским элементом.

Если вы не хотите затрагивать абзацы в боковой панели, и выбрать только первый <p> в контейнере <div class=’page’>, то нужно ограничить область его применения с помощью селектора дочерних элементов. Например:

.page > p:first-of-type {
  color: #7E8184;
  font-style: italic;
}

Различные разработчики придерживаются разных «школ». Некоторым нравится семантическая природа псевдоклассов, в то время как другие доводят до крайности применение различных подробных атрибутов класса для каждого HTML-элемента.

CSS селекторы идентификаторов – альтернатива селекторам классов. Они работают почти так же, но на странице может размещаться только один элемент с определенным идентификатором. Это означает, что вы не сможете повторно использовать стили.

Вместо атрибута class для любого элемента HTML, используется атрибут id. Попробуйте добавить идентификатор ко второй кнопке:

<a href='nowhere.html'>Кнопка Два</a>

Соответствующий селектор CSS должен начинаться с символа хэша (#). Добавление следующего кода в файл styles.css изменит цвет текста желтой кнопки:

#button-2 {
  color: #5D6063;  /* Dark gray */
}

Проблема в том, что если мы захотим задать этот стиль и для другой кнопки, то нужно присвоить ей еще один уникальный атрибут id. Довольно скоро наш CSS начнет выглядеть довольно «грязно»:

/* (Это тяжело поддерживать) */
#button-2,
#button-3,
#checkout-button,
#menu-bar-call-to-action {
  color: #5D6063;
}

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

Атрибуты id должны быть уникальными, поскольку на них указывают «фрагменты URL-адресов». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса:

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

<!-- С той же страницы -->
<a href='#button-2'>Go to Button Two</a>
<!-- С другой страницы -->
<a href='selectors.html#button-2'>Go to Button Two</a>

Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:

Этот пересекающийся функционал является веской причиной для того, чтобы избегать использования идентификаторов. Они создают зависимость между URL-адресами сайта и стилями CSS. Представьте, что вы используете в заголовках кучу атрибутов id в качестве как фрагментов URL-адресов, так и идентификаторов. Если вы забудете обновить таблицу стилей, когда отредактируете URL-адрес, то сломаете свой сайт.

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

Но не все селекторы CSS равнозначны. «Специфичность CSS» — это значимость, установленная для различных категорий селекторов. Это означает, что некоторые селекторы всегда будут переопределять другие независимо от того, какую позицию они занимают в таблице стилей.

Если вы добавите следующий код после существующих правил .call-to-action, он переопределит заданный ранее цвет фона. Если вы разместите его в верхней части файла, он сам будет переопределен, и наша кнопка не станет красной. Это ожидаемое поведение:

.call-to-action:link,
.call-to-action:visited {
  background-color: #D55C5F;    /* Красный */
}

Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action:

#button-2 {
  background-color: #D55C5F;    /* Красный */
}

CSS селекторы идентификаторов имеют более высокую специфичность, чем селекторы классов, поэтому вторая кнопка будет красной, даже если мы зададим фоновый цвет с помощью .call-to-action:link ниже. Концепция «порядок имеет значение» работает только тогда, когда все правила имеют одинаковую специфичность:

Специфичность селекторов, которые мы рассматривали в этой статье, показана ниже: от максимальной до минимальной:

•	#button-2
•	.button:link и .synopsis em (они равнозначны)
•	.button
•	a:link
•	a

Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием «BEM». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.

В этой статье вы получили практический опыт работы с CSS селекторами классов, селекторами потомков, псевдоклассами, стилями ссылок и селекторами идентификаторов. Цель всех, описанных в этой статье приемов – обеспечить возможность указать определенный HTML-элемент из CSS-кода. Селекторы классов являются самыми универсальными и имеют наименьшее количество недостатков.

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

Вадим Дворниковавтор-переводчик статьи «css selectors»

CSS-селекторы для начинающих

Окей, скажут некоторые мои подписчики и отпишутся от обновлений. Конечно, я понимаю, что во-первых статья для совсем начинающих, во-вторых, довольно много информации есть по этой теме… но тем не менее у многих людей, которые ко мне обращаются, возникают с этим проблемы. А я даже и не знаю, на какую статью им ссылку дать, смотрю одно руководство, смотрю второе, и что-то ни одно из них мне не нравится.

Сейчас я постараюсь пролить немного света на эту тему. Однако скажу, что тут всё очень просто на самом деле — главное не стоит сразу же начинать разбираться с nth-child(even). Чтобы делать хорошую верстку, достаточно понять, как работают ID, классы и иерархия элементов.

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

Пример 1. Селекторы по ID элемента

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

<em>Текст курсивом.</em>
<strong>Жирный текст.</strong>

HTML5-спецификация допускает использование в качестве названия атрибута ID довольно большой набор символов, но я ограничиваюсь буквами латинского алфавита + символ подчеркивания _ + цифры, мне этого хватает.

/* чтобы обратиться к элементу с конкретным ID через CSS, добавим перед ним # */
#misha_em{
	color:#888; /* серый цвет для курсива */
}
#misha_strong{
	color:#fe0000; /* красный для жирного текста */
}

Как обратиться к нескольким элементам одновременно

Очень просто — перечислить их через запятую:

#misha_em, #misha_strong{
	text-tansform: uppercase; /* конечно мы недостаточно выделили наш текст, пусть еще будет в верхнем регистре */
}

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

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

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

<em>Текст курсивом.</em>
<strong>Жирный текст.</strong>

Переделаем предыдущий пример и получим:

/* чтобы обратиться к элементам класса, добавим перед ним точку */
.misha_text{
	text-tansform: uppercase; /* оба элемента <em> и <strong> будут переведены в верхний регистр */
}

Также мы можем обратиться ко всем элементам жирного текста <strong> с классом .misha_text, добавив перед точкой название тега элемента:

/* обращаемся ко всем <strong> класса misha_text */
strong.misha_text{
	color:#fe0000;
}

Очень кратко про приоритеты

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

Тут может показаться, что элементу должен быть присвоен цвет #fe0000, так как это значение свойства указано в последнюю очередь, однако всё совсем не так.

.misha_text{
	color:#fff !important; /* если после значения свойства указать !important - это самый высочайший приоритет */
}
#misha_strong {
	color:#eee; /* у ID приоритет выше, чем у классов, это правило будет считаться важнее, чем .misha_text */
}
.misha_text{
	color:#fe0000;
}

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

Пример 3. Селекторы по HTML тегам. «Путешествие» по дереву DOM

Дерево — это иерархия всех HTML-тегов на странице.

Я предположу, что вы уже знаете парочку HTML-тегов, например то, что <div> — это просто блок, <ul> и <li> — элементы списка, <strong> — жирный текст, <p> — абзац.

<div>
	<ul>
		<li>Элемент списка 1</li>
		<li>Элемент списка 2</li>
		<li><strong>Жирный</strong> элемент списка 3</li>
	</ul>
</div>
<p><strong>Жирный текст внутри абзаца</strong></p>

К каждому из типов этих элементов можно обратиться по CSS, например:

div{
	background-color:#eee; /* ко всем div (а он у нас один в примере) будет применен светло-серый фон */
}
li{
	color:green; /* текст элементов списка станет зелёного о_О цвета */
}
strong{
	background-color:#ff0000; /* фон всех элементов strong станет красного цвета */
}

Думаю тут пока понятно, пишем название любого HTML тега в CSS и прописанные вами правила применятся для каждого указанного тега на вашей HTML-странице.

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

Тут нам поможет наследственность. В CSS мы можем указать полный путь к нужному нам элементу от самого начала документа, да хоть от самого <body>! Чтобы понять, о чем я говорю, смотрите пример:

/* это означает, что стили будут применяться ко всему жирному тексту, 
который находится внутри элемента <ul>, который в свою очередь находится внутри элемента <li>,
который в свою очередь находится внутри элемента <div>, и необязательно, чтобы эти элементы
шли друг за другом последовательно!!! то есть может быть и так: div p ol li ul li p strong */
div ul li strong{
	background-color:#ff0000;
}
/* ситуация точно такая же, необязательно элемент <strong> должен сразу идти после элемента <p>,
это может быть и: p span strong */
p strong{
	background-color:#aaa;
}

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

Для начала — зачем нам указывать полный путь к элементу, ведь достаточно и одного:

div strong{
	background-color:#ff0000;
}
p strong{
	background-color:#aaa;
}

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

/* сначала для всех <strong> делаем красный фон */
strong{
	background-color:#ff0000;
}
/* а потом перезаписываем правила для тех <strong>, которые находятся внутри абзацов <p> */
p strong{
	background-color:#aaa;
}

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

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Все про HTML/Селекторы

Селекторы

Правила каскадных таблиц стилей, в которых в качестве селектора используются тэги HTML, влияют на отображение всех элементов заданного типа в документе. Следующие правило отображает без подчёркивания все ссылки (тэг <A> ) в документе:

<STYLE type=»text/css»>

<!—

A { text-decoration: none; }

—>

</style>

А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в тэге, а можно применить параметр class , добавленный в HTML 4.0 в качестве стандарта для всех тэгов. Значением параметра class является ссылки на класс, задаваемый в таблице стилей.

Селектор class

Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тэга и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра class соответствующего тэга применять разные правила форматирования в документе. Например, можно определить два класса отображения заголовка первого уровня:

<STYLE type=»text/css»>

<!—

h2.red { color: red; }

h2.blueBgrd { color: red; background-color: blue }

—>

</style>

В тексте документа ссылка на соответствующий класс задаётся в параметре class:

<h2> Красный шрифт </h2>

<h2> Красный шрифт на синем фоне </h2>

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

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

<STYLE type=»text/css»>

<!—

.red { color: red; }

.blueBgrd { color: red; background-color: blue }

—>

</style>

Теперь два класса red и blueBgrd можно применить к любым элементам документа:

<P class=red> Первый абзац </p>

<P class=blueBgrd> Второй абзац </p>

Селекрор ID

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

Правила таблиц стилей регламинтируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом # :

<STYLE type=»text/css»>

<!—

#par24 { letter-spacing: 1em; }

#form3 { color: red; background-color: blue }

—>

</style>

<BODY>

<P> Разрежённые слова </p>

<P> Чёрный шрифт </p>

В этом примере абзац идентифицирован именем par24 в параметре id , поэтому к нему применимо правило с селектором #par24 . Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3 . Такого элемента в нашем фрагменте HTML-кода нет, а заголовок form2 отображается с применением правила по умолчанию.

Контекстные селекторы

При разработке страниц HTML часто приходиться одни элементы вкладывать в другие, например, выделять слова тэгом <EM> в каком-нибудь абзаце задаваемом тэгом <P> . В этом случае говорят, что элемент <P> порождает элемент <EM> и является его предком , а сам элемент <EM> является потомком элемента <P> . Некоторые свойства предка наследуются потомком, например, цвет шрифта (свойство color ). Если необходимо чтобы выделяемые только в абзацах элементы отображались одним образом, а в других частях документа по — другому применяют контекстные селекторы . Например, для отображения в абзацах текста выделеного тэгами <EM> шрифтом жёлтого цвета необходимо задать следующее правило:

P EM { color: yellow }

Контекстный селектор состоит из нескольких простых, разделённых пробелами. Интерпритатор браузера просматривает в стеке все открытые элементы, находит элементы <EM> , порождённые элементом <P> , и применяет к ним указанное правило форматирования.

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

Обычно браузеры отображают посещённые ссылки отлично от непосещённых (например, разными цветами). CSS1 регламентирует правила для отображения ссылок через псевдоклассы элемента A :

A:link { color: red } /*непосещённая ссылка*/

A:visited { color: blue } /*посещённая ссылка*/

A:active { color: green } /*активная ссылка*/

A:hover { color: lime } /*ссылка, выбранная курсором мыши*/

Активная ссылка — это ссылка, которая выбрана в данный момент, причём необязательно курсором мыши, а, например, при помощи клавиши Tab.

Любую ссылку в документе можно отнести к одному из перечисленных классов.

В каскадных таблицах текст, заключённый между символами /* и */ , является комментарием.

Так называемые псевдоклассы применяются к единственному типу элементов — <A> , поэтому при задании их в селекторе правил этот элемент можно опустить. Следующие два правила равносильны:

A:link { color: red } /*непосещённая ссылка*/

:link { color: red } /*непосещённая ссылка*/

css — Почему Svelte не ограничивает тег под классом, а использует индивидуальный tag.class для стилизации компонента?

Когда у компонента есть несколько стилей CSS, естественно использовать

.my-component-01 h2 { ... }
.my-component-01 h3 { ... }

Для определения стилей, но Svelte использует

h2.svelte-hlsza1{color:orange}
h3.svelte-hlsza1{background:yellow}

Является ли это более надежным, чтобы фактически охватить его определенным классом (верхним методом), потому что по крайней мере внутри разметки HTML скомпилированный код может быть просто:

<div>
  <h2> ...
  <h3> ...

Вместо того, чтобы повторять имя класса каждый раз. (и я думаю, что специфика та же: 1 класс и 1 имя тега).

0

nonopolarity

4 Фев 2020 в 12:15

2 ответа

Лучший ответ

Потому что Svelte не требует ни одного элемента верхнего уровня.

<!-- no problem for Svelte -->
<h2>...</h2>
<h3>...</h3>

На самом деле это даже не требует элементов вообще.

<script>...</script>
<!-- this is the end of the component (still no problem for Svelte) -->

Безотносительно … Без корневого элемента стратегия единого класса упаковки не применима.

Кроме того, это будет охватывать не только текущий компонент, но и текущий компонент и его дочерние элементы . Рассмотрим этот пример:

<!-- Scoped.svelte -->
<style>
   span { color: red }
</style>

<div>
  <span>I should be red</span>
</div>

<slot />

<!-- App.svelte -->
<script>
  import Scoped from './Scoped.svelte'
</script>

<Scoped>
  <span>I should not be red</span>
</Scoped>

<span> в App.svelte является не частью компонента Scoped, но является его дочерним элементом в DOM.

Примечание. Если вы хотите получить доступ к текущему компоненту и его дочерним элементам, уловка заключается в использовании {{X0} } псевдо-селектор:

<style>
  /* note that you do need a wrapping element, this time, to do that */
  div :global(span) { color: blue }
</style>

Стиль селектора div становится ограниченным, поэтому мы ориентируемся только на дочерние элементы этого компонента (в DOM), но не выше.

4

rixo
4 Фев 2020 в 09:52

Вы правы, что уровень специфичности такой же, но это правило:

.my-component-01 h2 { ... }

Предполагает, что есть элемент, который оборачивает h2, в Svelte это никогда не имеет место. Нет родительского элемента HTML по умолчанию для компонентов, и не должно быть.

Если вы посмотрите этот REPL, например; несмотря на то, что один из тегов h2 происходит из импортированного компонента, оба тега h2 находятся рядом друг с другом в скомпилированной разметке следующим образом:

<body>
  <h2>This is green</h2>
  <h2>This is red</h2>
</body>

Если бы это был естественный путь, то Svelte пришлось бы изменить скомпилированную разметку, чтобы она выглядела примерно так:

<body>
  <someelement>
    <h2>This is green</h2>
  </someelement>
  <someelement>
    <h2>This is red</h2>
  </someelement>
</body>

Это приведет к непредсказуемым результатам при использовании css-flex или grid, которые зависят от отношений родитель-потомок. Поэтому, хотя повторяющиеся имена классов для элементов могут раздражать тех, кто часто проверяет браузер (большинство пользователей этого не делают), это неизбежное зло, которое позволяет CSS работать должным образом.

1

JHeth
4 Фев 2020 в 10:04

Как использовать несколько классов CSS для одного элемента

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

E + / Getty Images

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

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

Один или несколько классов в CSS?

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

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

Например, в этом абзаце есть три класса:

Это будет текст абзаца

data-type = «code»>

Это устанавливает следующие три класса для тега абзаца:

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

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

  .pullquote {...} 
 .featured {...} 
 p.left {...}

data-type = «code»>

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

Если вы устанавливаете класс для определенного элемента (например, p.left ), вы все равно можете использовать его как часть списка классов; однако имейте в виду, что это повлияет только на те элементы, которые указаны в CSS. Другими словами, стиль p.left будет применяться только к абзацам с этим классом, поскольку ваш селектор фактически говорит применить его к «абзацам со значением класса left ». Напротив, два других селектора в example не указывают определенный элемент, поэтому они будут применяться к любому элементу, который использует эти значения класса.

Несколько классов, семантика и JavaScript

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

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

Преимущества нескольких классов

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

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

левый

data-type = «code»>

а также

Правильно

data-type = «code»>

с просто

плыть налево;

data-type = «code»>

а также

float: right;

data-type = «code»>

в них. Затем, когда у вас есть элемент, который нужно переместить влево, вы просто добавляете класс «left» в его список классов.

Однако здесь есть прекрасная линия для прогулки.Помните, что веб-стандарты диктуют разделение стиля и структуры. Структура обрабатывается с помощью HTML, а стиль — с помощью CSS. Если ваш HTML-документ заполнен элементами, у всех которых есть имена классов, такие как «красный» или «левый», которые определяют, как элементы должны выглядеть, а не то, что они есть, вы пересекаете границу между структурой и стилем.

Недостатки нескольких классов

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

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

Используя такой инструмент, как инструменты для веб-мастеров в Google Chrome, вы можете легче увидеть, как ваши классы влияют на ваши стили, и избежать этой проблемы, связанной с конфликтом стилей и атрибутов.

Используйте Mutliple Classes в одном элементе в CSS

  1. Назначьте несколько классов одному элементу и стилизуйте оба класса одновременно в CSS
  2. Назначьте несколько классов одному элементу и стилизуйте оба класса по отдельности в CSS

В этом руководстве будут представлены методы использовать несколько классов в одном элементе CSS.

Назначьте несколько классов одному элементу и стилизуйте оба класса одновременно в CSS

В HTML мы используем атрибут class для назначения класса элементу. Мы можем применить класс ко всем элементам в HTML, например p , h2 — h6 , a , div и многим другим. В CSS мы используем селектор классов . , чтобы выбрать элемент с соответствующим именем класса, и мы можем применить к нему стили. Но бывают случаи, когда мы хотим назначить несколько элементов одному классу и стилизовать классы.В таких случаях HTML позволяет нам назначать несколько классов одному элементу. Мы можем написать несколько имен классов, разделенных пробелом, в любом элементе. CSS также позволяет нам стилизовать такие классы, выбирая оба класса одновременно. Мы можем использовать . , чтобы выбрать первый класс и снова выбрать второй класс, не оставляя пробелов. Затем мы можем установить стили для выбранных классов. Мы можем назначить более двух классов одному элементу и применить стили сразу ко всем классам.

Например, создайте три тега p в HTML и присвойте им имена классов первый , второй и первый второй . Обратите внимание, что для третьего класса между именами классов остается пробел. Напишите тексты KTM , Honda и Kawasaki для трех классов между тегами p . Выберите класс первым в CSS и установите его цвет на оранжевый . Аналогичным образом выберите класс второй и установите для него значение красный и, наконец, выберите оба класса как .первый. второй и установите цвет как зеленый .

В приведенном ниже примере мы использовали несколько классов в одном элементе и стилизовали эти классы сразу.

Пример кода:

  
 KTM 


 Honda 


 Кавасаки 

  
  .first {цвет: оранжевый; }
.second {цвет: красный; }
.first.second {цвет: зеленый; }

Назначьте несколько классов одному элементу и стилизуйте оба класса по отдельности в CSS

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

Например, создайте заголовок класса в теге p и напишите некоторый текст. Точно так же создайте другой тег абзаца и назначьте ему текст заголовка нескольких классов . Напишите текст в теге абзаца. В CSS выберите title class и установите цвет фона на skyblue .Затем выберите класс text и присвойте ему цвет green .

Здесь цвет фона обоих абзацев будет установлен на skyblue . Это потому, что мы стилизовали заголовок класс, чтобы установить цвет фона. И в обоих абзацах есть заголовок класс. Однако второй абзац изменит свой цвет только на зеленый , потому что мы применили этот стиль только к классу text . Этот подход позволяет нам использовать несколько классов для одного элемента, чтобы применять общие стили и индивидуальный стиль к элементам.Таким образом, мы можем назначить несколько классов одному элементу и стилизовать классы индивидуально для написания эффективного CSS.

Пример кода:

  

 Привет!




 Добро пожаловать на озеро Рара


  
  .title {
 нижнее поле: 30 пикселей;
 цвет фона: голубой;
 }
 
 .text {
 цвет: зеленый;
 }

Внести вклад

DelftStack - это коллективный проект, созданный такими компьютерными фанатами, как вы. Если вам понравилась статья и вы хотите внести свой вклад в DelftStack, написав платные статьи, вы можете проверить страницу напишите для нас.

Css назначить несколько классов одному элементу

Затем правило .social имеет как общие стили, так и стили последнего элемента. Вы можете разделить классы в CSS и по-прежнему вызывать оба, просто используя в HTML. Вам просто нужен пробел между одним или несколькими именами классов., И .social: first-child переопределяет их стилями первого элемента., Помните, что вы можете применить несколько классов к элементу, разделив каждый класс пробелом в его атрибуте класса. Например:

Если вам нужно два класса для одного элемента, сделайте это следующим образом:

Ссылка на него в CSS следующим образом:

загрузить больше v

Как применить два класса CSS к одному элементу?, Как установить значение по умолчанию для элемента HTML ), флажок () или параметр (