Упрощены идентификаторы и дочерний комбинатор

Question

У меня есть 7 идентификаторов с одинаковыми дочерними комбинаторами, как я могу упростить это, чтобы мне не пришлось выписывать это следующим образом:

#section-monday > div > div > div:nth-child(1),
#section-tuesday > div > div > div:nth-child(1),
#section-wednesday > div > div > div:nth-child(1),
... {}

Могу ли я как-то сгруппировать идентификаторы и следовать им только один раз с помощью комбинатора для детей?

лайк

"#section-monday, #section-tuesday, #section-wednesday" > div > div > div:nth-child(1){}

Спасибо.

Answer 1

Вы можете использовать часть текста идентификатора в качестве селектора, но вы должны использовать класс в таких случаях

[id*="section-"] > div > div > div:nth-child(1){
border:1px solid red;
}

<div id="section-monday">
  <div>
    <div>
      <div>
        :D
      </div>
      <div>
        :(
      </div>
    </div> 
  </div> 
</div>
<div id="section-tuesday">
  <div>
    <div>
      <div>
        :D
      </div>
      <div>
        :(
      </div>
    </div> 
  </div> 
</div>
<div id="section-monday">
  <div>
    <div>
      <div>
        :D
      </div>
      <div>
        :(
      </div>
    </div> 
  </div> 
</div>
<div id="section-wednesday">
  <div>
    <div>
      <div>
        :D
      </div>
      <div>
        :(
      </div>
    </div> 
  </div> 
</div>