CSS Child Selectors

/* .parent child — selects any <p> inside .card, no matter how deep */
.card p {
  color: #2c3e50;
}

/* .parent > child — selects <h2> only if it's a direct child of .card */
.card > h2 {
  font-weight: 600;
}

/* element + sibling — selects the <div> right after an <img> */
.card img + div {
  margin-top: 0.625rem;
}

/* [attribute="value"] — selects by HTML attribute instead of class name */
[data-role="card-footer"] a {
  text-transform: uppercase;
}

/* :checked + sibling — styles the <label> when its checkbox is checked */
.card input:checked + label {
  color: #27ae60;
  text-decoration: underline;
}