0

Допустим что у меня есть три класса:

*{
    margin: 0;
    padding: 0;
}

.class1{
    color: red;
}

.class2{
    width: 60px;
    height: 70px;
}

.class3{
    width: 600px;
    height: 700px;
}

Как сделать так чтобы 2 и 3 классы имели так-же и свойства 1 класса?

1
  • 1
    .class1, .class2, .class3 {color: red;} всё
    – De.Minov
    2 апр 2019 в 15:11

2 ответа 2

1

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

[class^="class"] {
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  background-color: rgb(126, 173, 207);
}

[class^="class"]:hover {
 background-color: red;
}
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>

0

Есть два способа:

В первом ты просто когда создаешь блок прописываешь классу через пробел все что тебе нужно

/* Здесь чтобы к классу class добавить class-1 пишем как тут */
.class {
    background: red;
}
.class.class-1 {
    color: #fff;
}
.class.class-2 {
    color: #000;
}
.class.class-3 {
    color: green;
}
<div class="class class-1">
            hello
        </div>
        <div class="class class-2">
            world
        </div>
        <div class="class class-3">
            XD
        </div>

Второй способ:

Этот способ кажется быстрее. Просто берешь все нужные тебе блоки и пишешь их через запятую.

.class-1, .class-2, .class-3 { /* как-то так пишешь*/
    background: red;
}
.class-1 {
    color: #fff;
}
.class-2 {
    color: #000;
}
.class-3 {
    color: green;
}
        <div class="class-1">
            hello
        </div>
        <div class="class-2">
            world
        </div>
        <div class="class-3">
            XD
        </div>

Выбирать тебе, кому как удобно:)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.