[CSS] child 선택자

1. 개요

연속되는 요소가 있고 그 요소들의 CSS 속성을 다르게 지정하고 싶을 때, child 선택자를 사용하여 CSS의 속성을 다르게 줄 수 있다.

2. child 선택자의 종류

• only-child
  자식요소가 하나인 경우 적용이 된다.
• first-child
  자식요소가 여러개인 경우 가장 첫번째 자식요소가 선택이 된다. 
• last-child
  자식요소가 여러개인 경우 가장 마지막 자식요소가 선택이 된다. 
• nth-child()
  자식요소가 여러개인 경우 소괄호 안에 지정한 숫자에 대응하는 순서인 요소가 선택이 된다.
• nth-last-child()
  자식요소가 여러개인 경우 소괄호 안에 지정한 숫자에 역순으로 대응하는 순서인 요소가 선택이 된다.

이번 포스팅에서는 last-child를 다루어 보겠다.

3. 사용법

위와 같은 리스트가 있다고 하자.

모든 list 요소의 margin이 8px인데 마지막 요소인 list 5의 margin-bottom을 20px을 주고 싶다고 한다면

last-child를 사용하여 간단하게 적용할 수 있다.

.item-list:not(:last-child) {
  border-color: #403e39;
  border-width: thin;
  border-style: solid;
  border-radius: 3px;
  margin: 8px 8px 8px 8px;
}
.item-list {
  border-color: #403e39;
  border-width: thin;
  border-style: solid;
  border-radius: 3px;
  margin: 8px 8px 20px 8px;
}

결과물은 다음과 같다.