<div class="uyari">Tarayıcınız CSS :has() ebeveyn seçicisini desteklemiyor</div>

<article>
  <figure>
    <img src="https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/kedi.jpg?raw=true" alt="spring flowers">
  </figure>

  <figure>
    <img src="https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/kedi.jpg?raw=true" alt="black dog smiling in the sun">
    <figcaption>Sevimli kedicik :)</figcaption>
  </figure>
</article>
@import url('https://fonts.googleapis.com/css2?family=Viaoda+Libre&display=swap');

body{
  font-family: 'Lato', sans-serif;
  line-height: 1.5;
  font-size: 16px;
  background: #B3B3B3;
  color: #2b2b2b;
}

article {
  width: 550px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: calc(1rem + 2vw);
}

figure img {
  width: 150px;
}

figure:has(figcaption) {
  background: white;
  padding: 10px;
}

.uyari {
  margin-inline: auto;
  width: 550px;
  background-color: #fff;
  padding: 20px;
  border: 4px solid #e6b31a;
}

@supports(selector(:has(+ *))) {
  .uyari {
    display: none;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.