<span class="yellowTiger"> </span>
<a class="yellowIceTiger"> </a>
<div class="yellowCow"> </div>
<b class="yellowApe"> </b>
<c class="yellowIce"> </c>
Как выбрать все классы, начинающиеся с желтого или со льдом? Я знаю, что это возможно не помню ..Как выбрать все классы, начинающиеся с желтого
Edit :: Почему не отдел ют классы, потому что я не люблю: р
Используйте starts with селектор CSS ^=, чем выберите класс как атрибут:
[class^="yellow"] {
background-color: yellow;
}
[class^="blue"] {
background-color: blue;
}
[class^="red"] {
background-color: red;
}<span class="yellowTiger"> </span>
<a class="yellowIceTiger"> </a>
<div class="yellowCow"> </div>
<div class="bluewCow"> </div>
<div class="redwCow"> </div>
<b class="yellowApe"> </b>
<c class="yellowIce"> </c>Но (поправьте меня, если я ошибаюсь), это медленнее, чем просто выбрать .yellow, когда у вас есть отдельные классы как группы yellow ice tiger
> да! спасибо за напоминание :) –
Что было бы причиной использовать это для создания 2 разных классов? – Fabiotocchi
@Fabiotocchi ленивость использовать лучшие практики. Но поскольку ОП сказал, что два класса для него не подходят, это ответ. – Justinas
В элементах html, когда в атрибуте класса задано от 2 слов, этот элемент считается принадлежащим обоим классам. Так реструктуризировать вам классы, как это ...
<span class="yellow tiger"> </span>
<a class="yellow ice tiger"> </a>
<div class="yellow cow"> </div>
<b class="yellow ape"> </b>
<c class="yellow ice"> </c>
Первый <span> элемент принадлежит как классов, yellow и tiger. Аналогично, <a> элемент принадлежит все три классов, yellow, ice и tiger
Теперь используйте .yellow селектор, чтобы выбрать все элементы класса yellow. Поскольку все элементы в этом примере имеют класс yellow, все они будут выбраны.
.yellow {
/*Whatever styling you want */
}
Другой пример просто, чтобы понять:
Чтобы выбрать все элементы класса ice, т.е. <a> и <c> в этом случае используйте .ice.
.ice { /* This selects the <a> and <c> elements */
}
Как @Justinas сказал, что решение будет создавать класс «Желтый» и класс «лед». Тогда вы могли бы создать что-то вроде этого.
<span class="yellow Tiger"> </span>
<a class="yellow Ice Tiger"> </a>
<div class="yellow Cow"> </div>
<b class="yellow Ape"> </b>
<c class="yellow Ice"> </c>
Таким образом, вы можете назначить стиль льда для элементов, которые имеют лед и желтый стиль для тех, кто имеет желтый как класс
Почему бы не иметь класс 'желтый tiger' или' желтый ape' вместо? – Justinas
Спасибо, но не ответим на мой вопрос .. –