HTML CSS 맨 첫번째 child

<div class="layout">
  <div class="subtitle">제1장</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque mauris sit amet blandit lobortis. Suspendisse et vulputate ante. Vestibulum turpis purus, ornare eget velit a, tempus dictum nisl. Aliquam erat volutpat. Nulla nisl libero, luctus id lobortis nec, commodo at diam. Sed imperdiet orci vel velit blandit gravida. Proin eget justo sem. Aenean scelerisque in nisi ac rutrum.</div>
  
  <div class="subtitle">제2장</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque mauris sit amet blandit lobortis. Suspendisse et vulputate ante. Vestibulum turpis purus, ornare eget velit a, tempus dictum nisl. Aliquam erat volutpat. Nulla nisl libero, luctus id lobortis nec, commodo at diam. Sed imperdiet orci vel velit blandit gravida. Proin eget justo sem. Aenean scelerisque in nisi ac rutrum.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque mauris sit amet blandit lobortis. Suspendisse et vulputate ante. Vestibulum turpis purus, ornare eget velit a, tempus dictum nisl. Aliquam erat volutpat. Nulla nisl libero, luctus id lobortis nec, commodo at diam. Sed imperdiet orci vel velit blandit gravida. Proin eget justo sem. Aenean scelerisque in nisi ac rutrum.</div>
</div>

.layout .subtitle {
  margin-top: 20px;
  font-weight: bold;
}

.layout .subtitle:first-child {
  margin-top: 0 !important;
  font-weight: bold;
}

첫번째 자식만 다르게 하기