<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :has() と :not() のサンプル</title>
    <style>

    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item highlight">Item 2 (Highlighted)</div>
        <div class="item">Item 3</div>
    </div>
      <div class="container container02">
        <h2>タイトル</h2>
        <p class="item">Item 1</d>
        <p class="item highlight02">Item 2 (Highlighted)</d>
        <p class="item">Item 3</d>
    </div>
</body>
</html>
        /* :has() 関数の使用例 */
        .container:has(.highlight) {
            border: 2px solid green;
            padding: 10px;
        }

        /* :not() 関数の使用例 */
        .item:not(.highlight) {
            background-color: lightgray;
        }

.container02{
  margin-top: 40px;
  
  
  
}

.container:has(h2){
  background-color: #eee;
  
  
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.