<!-- Selecting Parent Element -->

<div class="div1">
  <h1>Selecting Parent Element</h1>
  <div class="flex">
    <figure>
      <img src="https://source.unsplash.com/random/?cat">
      <figcaption>Cat with caption</figcaption>
    </figure>

    <figure>
      <img src="https://source.unsplash.com/random/?cat asleep">
    </figure>
  </div>
</div>

<!-- Selecting Child Element -->
<div class="div2">
  <h1>Selecting Child Element</h1>
  <div class="flex">
    <a href="#">
      <figure>
        <img src="https://source.unsplash.com/random/?pizza">
        <figcaption>Pizza with caption</figcaption>
      </figure>
    </a>
    <a href="#">
      <img src="https://source.unsplash.com/random/?burger">
    </a>
  </div>
</div>

<!-- Grouping of Multiple Children -->
<div class="div3">
  <h1>Grouping of Multiple Children</h1>

  <main>
    <section>
      <h2>heading 1 cursus eget nunc scelerisque viverra</h2>
      <p>consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae <b>semper quis lectus</b> nulla at volutpat diam ut venenatis tellus in metus</p>
    </section>
    <section>
      <h2>heading 2 pulvinar pellentesque habitant morbi tristique</h2>
      <p>purus sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non enim praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla</p>
      <p>etiam tempor orci eu lobortis elementum nibh tellus molestie nunc non blandit massa enim nec dui nunc mattis enim ut tellus elementum sagittis vitae et</p>
    </section>
  </main>
</div>

<!--  Selecting the Previous Sibling Element -->
<div class="div4">
  <h1>Selecting the Previous Sibling Element</h1>
  <main>
    <section>
      <h2 class="heading">heading 1 cursus eget nunc scelerisque viverra</h2>
      <p>consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae nulla at volutpat diam ut venenatis tellus in metus</p>
    </section>
    <section>
      <h2 class="heading">heading 2 pulvinar pellentesque habitant morbi tristique</h2>
      <p>purus sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non enim praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla</p>
    </section>
    <section>
      <h2 class="heading">heading 3 tortor at auctor urna nunc</h2>
      <p>et malesuada fames ac turpis egestas integer eget aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea</p>
    </section>
  </main>
</div>

<!-- Conditional Decorations -->
<div class="div5">
  <h1>Conditional Decorations</h1>
  <div class="flex">
    <figure>
      <img src="https://source.unsplash.com/random/250x250/?cat">
      <figcaption>Cat with caption</figcaption>
    </figure>
    <figure>
      <img src="https://source.unsplash.com/random/250x250/?cat cat asleep">
    </figure>
    <figure>
      <img src="https://source.unsplash.com/random/250x250/?kitten">
    </figure>
  </div>
</div>

<!-- Styling Empty States -->
<div class="div6">
  <h1>Styling Empty States</h1>
  <div class="flex">
    <figure>
      <img src="https://source.unsplash.com/random/250x250/?cat">
      <figcaption>Cat with caption</figcaption>
    </figure>
    <figure> </figure>
    <figure>
      <img src="https://source.unsplash.com/random/250x250/?kitten">
      <figcaption>Kitten with caption</figcaption>
    </figure>
  </div>
</div>

<!-- Layout Customize -->
<div class="div7">
  <h1>Layout Customize</h1>
  <main>
    <article>
      <h2>This is an article headline</h2>
      <p>fusce id velit ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus in hac.</p>
    </article>
    <article>
      <h2>This is a heading for another article</h2>
      <p>quam id leo in vitae turpis massa sed elementum tempus egestas.</p>
    </article>
    <article>
      <h2>Nature <small>(2 column wide)</small></h2>
      <img src="https://source.unsplash.com/random/?nature">
      <p>suspendisse potenti nullam ac tortor vitae purus faucibus ornare.</p>
    </article>
    <article>
      <h2>heading for another article</h2>
      <p>quam id leo in vitae turpis massa sed elementum tempus egestas.</p>
    </article>
    <article>
      <h2>heading ...</h2>
      <p>mattis nunc sed blandit libero volutpat sed cras ornare arcu dui vivamus arcu felis bibendum.</p>
    </article>
</div>

<!-- Change Theme without Js -->
<div class="div8">
  <h1>Change Theme without Js</h1>
  <input type="checkbox" id="check"> <label for="check">Dark mode</label>
  <main>
    <section>
      <h2>heading 1 cursus eget nunc scelerisque viverra</h2>
      <p>consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae nulla at volutpat diam ut venenatis tellus in metus</p>
    </section>
    <section>
      <h2>heading 2 pulvinar pellentesque habitant morbi tristique</h2>
      <p>purus sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non enim praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla</p>
      <p>etiam tempor orci eu lobortis elementum nibh tellus molestie nunc non blandit massa enim nec dui nunc mattis enim ut tellus elementum sagittis vitae et</p>
    </section>
  </main>
</div>

<!--  Browser Support Check  -->
<div class="div9">
  <h1>Browser Support Check</h1>

  <h2>CSS <code>:has()</code> Selector Support Test</h2>

  <p id="output">Does your browser support the <code>:has()</code> selector</a></span>?</p>

</div>

/*......general styling .......... */
img {
  max-width: 100%;
  display: block;
}
h1 {
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
  font-family: Merriweather, serif;
  text-align: center;
  text-transform: capitalize;
}
a {
  display: block;
  text-decoration: none;
}
figure {
  margin: 0;
  flex: 1;
}
.div1,
.div3,
.div5,
.div7,
.div9 {
  background-color: #9d9d9d;
  padding: 2.5%;
  /*   min-height:100vh; */
}
.div2,
.div4,
.div6,
.div8 {
  background-color: lightgrey;
  padding: 2.5%;
  /*   min-height:100vh; */
}

.flex {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}
/*...... end of general styling .......... */

/*........ Selecting Parent Element ......*/
figure:has(figcaption) {
  background-color: rebeccapurple;
  padding: 1%;
}

/*........... Selecting Child Element .....*/
a:has(> img) {
  background: pink;
  padding: 1%;
}

a:has(figcaption) {
  color: black;
}

/* Grouping of Multiple Children */

.div3:has(h2, b) h2,
b {
  color: blueviolet;
}

/* Selecting the Previous Sibling Element */
.heading:has(+ p) {
  color: orangered;
  margin-bottom: 3rem;
  text-transform: capitalize;
}

/* Conditional Decorations */
.div5 figure:has(figcaption):hover {
  background-color: violet;
  font-size: 0.75rem;
  transform: scale(1.0125);
  border: 2px dotted green;
}
.div5 figure:not(:has(figcaption)) {
  /*   transform: scale(1.1); */
  border: 2px dotted red;
  height: 100%;
}
.div5 figure:hover {
  transform: scale(1.0125);
  border: 2px dashed green;
}

/* Styling Empty States */
.div6 figure:not(:has(:empty)) {
  cursor: wait;
  background-color: #2d2d2d33;

  display: flex;

  align-items: center;
  justify-content: center;
  text-transform: capitalize;
}
.div6 figure:not(:has(:empty)):before {
  content: "comming soon";
  color: grey;
  text-align: center;
}

/* Layout Customize */
.div7 main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1rem;
}
article {
  background-color: whitesmoke;
  border-radius: 8px;
  padding: 1rem;
}
.div7 article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}
.div7 article:has(img) small {
  color: #00000050;
  font-size: 8px;
}

/* Change Theme without Js */
.div8:has(input[type="checkbox"]:checked) {
  background-color: #3c4048;
  color: #b2b2b2;
}

/* Browser Support Check */
#output::after {
  display: inline-block;
  content: "❌ Your browser does not support :has()";
  background-color: #ff00002b;
}

@supports (selector(:has(*))) {
  #output::after {
    display: inline-block;

    content: "✅ Your browser supports :has()";
    background-color: #00ff002b;
  }
}