Можно ли 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 — это значение по умолчанию для большинства свойств, но не для всех.
Как расположить div внизу своего контейнера?
Перенос строки в HTML с использованием '\n'
Медиа-запросы: Как нацелиться на десктоп, планшет и мобильные устройства?
Как сделать перенос строки с помощью CSS, не используя <br />?
Как адаптировать ширину flex-элемента к содержимому?