CSS　:has()セレクター

    <div class="card">
        <img src="画像" alt="ブログ画像">
        <div class="content">
          <span class="badge">NEW</span>
          <h2>ブログタイトル</h2>
          <p>ブログの説明文がここに入ります。</p>
          <div class="tags">
            <span class="tag">プログラミング</span>
            <span class="tag">Web開発</span>
            <span class="tag">CSS</span>
          </div>
        </div>
      </div>
    
      <!-- 画像なしカード -->
      <div class="card">
        <div class="content">
          <h2>画像なしの記事</h2>
          <p>文章のみの記事です。</p>
          <div class="tags">
            <span class="tag">テキスト</span>
          </div>
        </div>
      </div>

 .card {
      border: 1px solid #ddd;
      padding: 20px;
      margin: 10px;
      border-radius: 8px;
    }
    
    /* 画像があるカードは2カラムレイアウトに */
    .card:has(img) {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 20px;
    }
    
    /* 画像がないカードは1カラムで中央寄せ */
    .card:not(:has(img)) {
      text-align: center;
    }
    
    /* NEW バッジがあるカードは背景色を変える */
    .card:has(.badge) {
      background: #fff8e1;
    }
    
    /* タグが3つ以上あるカードにスタイルを適用 */
    .card:has(.tags > *:nth-child(3)) {
      border-left: 4px solid #02f678;
    }
    
    img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      border-radius: 4px;
    }
    
    .badge {
      background: #ff3d02ed;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      display: inline-block;
      margin-bottom: 10px;
    }
    
    .tags {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    
    .tag {
      background: #f0f0f0;
      padding: 4px 8px;
      border-radius: 4px;
    }