JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="empty"></div>

<div class="empty2">
  empty2
</div>

<div class="empty3">
  <span class="empty4"></span>
  dfsfs
  <span class="empty4"></span>
</div>

<div class="empty3">
  <span class="empty4"></span>
  
  <span class="empty4"></span>
</div>

<div class="">
dfsdf
  <div class="empty5">empty5</div>
</div>

<ul>
  <li>test</li>
</ul>

CSS

.empty:empty {
  width: 10px;
  height: 10px;
  background: red;
  /* 요소 하위 요소가 없고 공백을 포함하여 무엇이든지 텍스트 
  콘텐츠가 없는 요소만 선택합니다. */
}

.empty2:empty {
  width: 10px;
  height: 10px;
  background: red;
}

.empty3:not(:has(*)) {
  width: 10px;
  height: 10px;
  background: red;
  
}

.empty5:has(div) {
  width: 10px;
  height: 10px;
  background: red;
}

li:has(ul) {
  background-color: yellow;
}