JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <div class="first">
    <div class='first-child'>dd</div>
  </div>
  <div class="second">
    <div class='second-child'></div>
  </div>
</div>

<!-- <section>
  <div class="section-header">
    <h2>Latest articles</h2>
    <a href="/articles/">See all</a>
  </div>
  
  <div class="section-header">
    <h2>Latest articles</h2>
  </div>
</section> -->

CSS

.second-child {
  width: 100px;
  height: 40px;
  /* background: green; */
}
.first-child {
  background: green;
}

/* :empty 의사 클래스는 요소가 비어 있다면을 선택합니다. */
/* .container 자손요소중에 .second-child 요소에 자식요소가 없을 경우 */
.container:has(.second-child:empty) .first .first-child {
  background: red;
}