Maintitle Color

Question

У меня есть код, с двумя блоками одинаковых, но разные только в название блока, тое-сть у первого блока есть ссылка, к который я поставил цвет linear-gradient. А у второго блока нет ссылки, и вот возникает вопрос как сделать к второму блоку цвет тоже как к первому? Но надо учесть что к второму блоку не надо добавить ссылку, и при смене цвета чтобы остался background-color h2.maintitle2 . Думаю ясно обьяснил что я сказал. оставлю код ниже.

@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');

body {
  background: #12151c;
  font-family: 'Concert One', cursive;
}
/*CONTENT 1*/
.box-content {
  background-color: #1a1d26;
    border-radius: 4px;
    width: 40%;
    height: 100%;
    padding: 6px;
    float: left;
}
h2.maintitle {
  background-color: #171a22;
    border-radius: 4px;
    margin: 6px;
     padding: 10px;
     text-align: center;
}
h2.maintitle a {
      background: linear-gradient(to right, #ff9a03, #ff0360);
    -webkit-background-clip: text;
    font-weight: bold;
    -webkit-text-fill-color: transparent;
   text-decoration: none;
   font-size: 18px;
}
 
ol.dataList {
  display: flex;
  justify-content: center;
}
ol.dataList li {
  margin: 15px;
  color: #fff;
}

 /*CONTENT 1 END*/
 
 /*CONTENT 2*/
.box-content2 {
  background-color: #1a1d26;
    border-radius: 4px;
    width: 40%;
    height: 100%;
    padding: 6px;
    float: right;
}
h2.maintitle2 {
  background-color: #171a22;
    border-radius: 4px;
    margin: 6px;
     padding: 10px;
     text-align: center;
     color: #4d5b6c;
     font-size: 20px;
}
 
ol.dataList2 {
  display: flex;
  justify-content: center;
}
ol.dataList2 li {
  margin: 15px;
  color: #fff;
}

 /*CONTENT 2 END*/

<body>
<!--CONTENT 1-->
<div class='box-content'>
<h2 class='maintitle'>
<a href='#'>CONTENT 1</a>
</h2>
<ol class='dataList'>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ol>
</div>
<!--CONTENT 1 END-->

<!--CONTENT 2-->

<div class='box-content2'>
<h2 class='maintitle2'>
CONTENT 2
</h2>
<ol class='dataList2'>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ol>
</div>
<!--CONTENT 2 END-->
</body>

Answer 1

сделайте класс, у которого будут одинаковые свойства для .box-content1 и .box-content2 (назовите например .box-content)
в классах .box-content1, .box-content2 оставьте только уникальные свойства
в блоках используйте сразу 2 класса - общий и индивидуальный

код:

<div class='box-content box-content1'>
</div>

<div class='box-content box-conten2'>
</div>

аналогично для дочерних классов - всё дочернее, что общее завяжите на общий класс box-content, а всё что индивидуальное - на box-content1 или box-content2

Не буду переписывать весь ваш пример, вот кусок как можно сделать

было

.box-content {
  background-color: #1a1d26;
    border-radius: 4px;
    width: 40%;
    height: 100%;
    padding: 6px;
    float: left;
}

.box-content2 {
  background-color: #1a1d26;
    border-radius: 4px;
    width: 40%;
    height: 100%;
    padding: 6px;
    float: right;
}

стало:

.box-content {
    background-color: #1a1d26;
    border-radius: 4px;
    width: 40%;
    height: 100%;
    padding: 6px;
}

.box-content1 {
    float: left;
}

.box-content2 {
    float: right;
}

БЛОГ НА HUSL

Maintitle Color

Ответы (1 шт):