Блок div внутри div css форматирование сэкономить на количестве стилей

Question

Всем привет. Вот такой вопрос возник, не знаю есть ли решение но спрошу, вдруг кто откликнется.

Есть структура набор div блоков выглядит так

  <div class="bdiv_1">
  <div class="bdiv_2">Название характеристики:</div>
  <div class="bdiv_3">Характеристика</div>
  </div>
  <div class="bdiv_1">
  <div class="bdiv_2">Название характеристики:</div>
  <div class="bdiv_3">Характеристика</div>
  </div>

Этих блоков много, друг за другом, div в нём два div-а и дальше опять, они вставлены в таблицу которая спозиционирована на странице, их суть характеристики, типа таблицы. Так вот блоки располагаются один за одним, т.е. горизонтально. Вот стили которые отвечают за них

.bdiv_1 {
  display: flex;
  font-size: 16px;
}
.bdiv_2 {
 font-weight: bold;
 display: inline-block;
 margin: 3px;   
 color: #1c1c1c;
}
.bdiv_3 {
  display: inline-block;
  margin: 3px;  
}

Так вот, информация копируется из источника в виде:

<div>
<div>Название характеристики:</div>
<div>Характеристика</div>
</div>

Соответственно потом вручную прописываются стили на каждый div, отличие первого блока только в цвете шрифта и то что он жирный. Так вот так как блоков много, то прописывание вручную довольно утомительно, соответственно вопрос, можно как то в стиль первого div bdiv_1 вставить стили для двух других дивов, что бы у первого шрифт был жирный. Что бы не прописывать в каждый блок свой стиль, а ограничится первым блоком в который включены два остальных, типа такого

  <div class="bdiv_1">
  <div>Название характеристики:</div>
  <div>Характеристика</div>
  </div>

Но в CSS стилях было назначено на первый блок жирный шрифт.

Понятно что можно было бы на списках пытаться, но информация из источника копируется в виде div-ов и перебирать её ещё более утомительно ;(

Надеюсь понятно описал. Может кто в курсе с помощью CSS можно решить проблему?

С Уважением.

Answer 1

Ваша проблема легко решается использованием псевдокласса :nth-of-type() и комбинатора непосредственных потомков. (Так как Вы не указали контейнер, куда добавляются блоки, то в качестве примера здесь указан селектор тега body.)

body > div {
  display: flex;
  font-size: 16px;
}

body > div > div:nth-of-type(1) {
  font-weight: bold;
  display: inline-block;
  margin: 3px;
  color: #1c1c1c;
}

body > div > div:nth-of-type(2) {
  display: inline-block;
  margin: 3px;
}

<div>
  <div>Название характеристики:</div>
  <div>Характеристика</div>
</div>
<div>
  <div>Название характеристики:</div>
  <div>Характеристика</div>
</div>

БЛОГ НА HUSL

Блок div внутри div css форматирование сэкономить на количестве стилей

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