【CSS擬似クラスの:has()】つまり、子から親を探せるというコトです

<ul>
  <li>Illustratorの本</li>
  <li>Photoshopの本</li>
  <li>HTML / CSSの本<span class="soldOut">売り切れ</span></li>
</ul>

/* spanを持っているli要素のスタイルだけを変える */
li:has(span){
  opacity: .5;
}

/* .soldOut要素を持っているli要素のスタイルだけを変える */
li:has(.soldOut){
  opacity: .5;
}

<!-- liから見ると、.soldOutは子要素 -->
<li>
  <span class="soldOut">売り切れ</span>
</li>

<!-- liから見ると、.soldOutは孫要素 -->
<li>
  <p><span class="soldOut">売り切れ</span></p>
</li>

<table>
  <thead>
    <tr>
      <th>受信メール一覧
        <select>
          <option value="blue">Blue</option>
          <option value="pink">Pink</option>
        </select>
      </th>
     </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox">メール1</td>
    </tr>
    <tr>
      <td><input type="checkbox">メール2</td>
    </tr>
    <tr>
      <td><input type="checkbox">メール3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><a href="#">選択したメールを削除する</a></td>
    </tr>
  </tfoot>
</table>

/* カラムに下ボーダーをつける */
table tbody td{
  border-bottom: 1px solid #EEE; 
}

/* ヘッダーのデフォルトの背景色はブルー */
table th{
  color: #FFF;
  background: #42699F;
  display: flex;
  justify-content: space-between;
}

/* デフォルトでは「選択したメールを削除する」は非表示 */
table tfoot td:last-child{
  display: none;
  text-align: right;
}

/* チェックを入れたtd要素の背景色を変更 */
td:has(input:checked) {
  background-color: #EEE;
}

/* 一つでもチェックが入っている場合は、「選択したメールを削除する」を表示（noneからblockに） */
table:has(input:checked) tfoot td{
  display: block;
}

/* プルダウンでpinkを選択時に背景色を変更 */
th:has(option[value="pink"]:checked){
  background-color:#E32A75;
}

/* divを親に持つp要素を指定する */
div > p{ }

/* pを子孫に持つdiv要素を指定する */
div:has(p){ }