Можно ли CSS-классу наследовать один или несколько других классов?
Вопрос о наследовании CSS-классов
Возможно ли создать CSS-класс, который "наследует" стили от другого CSS-класса (или нескольких классов)?
Например, у нас есть следующие классы:
.something { display:inline; }
.else { background:red; }
Я хотел бы сделать что-то вроде этого:
.composite
{
.something;
.else;
}
Где класс ".composite" должен иметь стили как для inline-отображения, так и для красного фона.
Есть ли способ реализовать такую функциональность в CSS? Если да, то как это сделать?
5 ответ(ов)
Вы можете добавить несколько классов к одному элементу DOM, например:
<div class="firstClass secondClass thirdClass fourthClass"></div>
Правила, указанные в классах, стоящих позже (или которые более специфичны), имеют приоритет. Таким образом, в данном примере fourthClass
будет иметь приоритет.
Наследование не является частью стандарта CSS.
Да, но не совсем с той синтаксисом.
.composite,
.something { display: inline; }
.composite,
.else { background: red; }
В данном примере ты видишь, что два класса .composite
и .something
имеют одно свойство display: inline
, а классы .composite
и .else
— одно свойство background: red
. Это позволяет использовать одну и ту же правую часть для нескольких селекторов, что упрощает и сокращает код.
Чтобы сохранить общий стиль для различных заголовков и при этом задать или переопределить конкретные свойства для каждого из них, можно использовать следующий подход:
/* ------------------------------------------------------------------------------ */
/* Заголовки */
/* ------------------------------------------------------------------------------ */
h1, h2, h3, h4 {
font-family : myfind-bold;
color : #4C4C4C;
display: inline-block;
width: 900px;
text-align: left;
background-image: linear-gradient(0, #F4F4F4, #FEFEFE); /* IE6 & IE7 */
}
h1 {
font-size : 300%;
padding : 45px 40px 45px 0px;
}
h2 {
font-size : 200%;
padding : 30px 25px 30px 0px;
}
В этом коде общие атрибуты для всех заголовков (h1, h2, h3, h4) определены в одном месте, что облегчает поддержку и изменение стилей. Специфические атрибуты, такие как font-size
и padding
, для каждого заголовка указаны отдельно, что позволяет точно контролировать их внешний вид без дублирования кода.
Элемент может принимать несколько классов:
.classOne { font-weight: bold; }
.classTwo { font-family: verdana; }
<div class="classOne classTwo">
<p>Я жирный и в шрифте verdana.</p>
</div>
К сожалению, это всё, что вам под силу получить на данный момент. Я бы с удовольствием увидел такую возможность, как и псевдонимы классов, в будущем.
Нет, вы не можете сделать что-то вроде
.composite {
.something;
.else;
}
Поскольку .something
и .else
не являются "именами классов" в объектно-ориентированном смысле. Это просто селекторы и ничего больше.
Но вы можете указать два класса для элемента:
<div class="something else">...</div>
Или рассмотреть другой способ наследования:
.foo {
background-color: white;
color: black;
}
.bar {
background-color: inherit;
color: inherit;
font-weight: normal;
}
<div class="foo">
<p class="bar">Hello, world</p>
</div>
В этом случае цвета фона и текста для параграфа наследуются от стилей родительского элемента с классом .foo
. Вам стоит ознакомиться с точной спецификацией W3C, поскольку inherit
— это значение по умолчанию для большинства свойств, но не для всех.
Получить координаты (X,Y) HTML-элемента
Как создать ненумерованный список без маркеров?
Стилизация кнопки input type="file"
Изменение цвета элемента hr
Использование подстановочного знака * в CSS для классов