<section>
  <h1>I am a heading 1</h1>
  <ul>
    <li>Number 1</li>
    <li>Number 2</li>
    <li>Number 3</li>
  </ul>
</section>

<section>
  <h2>I am a heading 2</h2>
  <h3>I am a heading 3</h3>
  <ul>
    <li>Number 1</li>
    <li>Number 2</li>
    <li>Number 3</li>
  </ul>
</section>

<section>
  <h2>I am a heading 2</h2>
  <h3>I am a heading 3</h3>
  <p>
    I am a paragraph
  </p>
</section>

<section>
  <h4>This section has a checked input</h4>
  <fieldset>
    <input type="radio" for="checked-1" name="check" checked />
    <label id="checked-1">Check 1</label>
    <input type="radio" for="checked-2" name="check" />
    <label id="checked-2">Check 2</label>
    <input type="radio" for="checked-3" name="check" />
    <label id="checked-3">Check 3</label>
  </fieldset>
</section>

<section>
  <h4>This section has no checked input</h4>
  <fieldset>
    <input type="radio" for="checked-4" name="check-1" />
    <label id="checked-4">Check 1</label>
    <input type="radio" for="checked-5" name="check-1" />
    <label id="checked-5">Check 2</label>
    <input type="radio" for="checked-6" name="check-1" />
    <label id="checked-6">Check 3</label>
  </fieldset>
</section>

<section>
  <form>
    <label id="number">Your favorite number</label>
    <input type="number" for="number" required />
  </form>
</section>

/* parent section has a specific element, ul */

section:has(ul) {
  background: red;
}

/* parent section both elements, h1 and ul */

section:has(h1):has(ul) {
  background: hotpink;
}

/* parent section has either or both elements, h2 and or p */

section:has(h2, p) {
  background: lightblue;
}

/* parent section does not have h3 element */

section:not(:has(h3)) {
  background: yellow;
}

/* h3 which is followed by a p */

h3:has(+ p) {
  background: limegreen;
}

/* section has an input that is checked, then the label gets bold */

section:has(input:checked) label {
  font-weight: 900;
}

section:has(> form) {
  background: unset;
  margin-top: 20px;
}

/* field validation: field has required attribute */

form:has(input:required) {
  border-left: 3px solid red;
  padding-left: 4px;
}

/* field validation: input is invalid */

form:has(input:invalid) label {
  color: red;
  font-weight: 900;
}