:nth-child

div:first-child {
  background-color:blue;
}

div:nth-child(2) {
  background-color:gold;
}

div:last-child {
  background-color:green;
}

div:nth-last-child(2) {
  background-color:pink;
}

• 선택자:first-child = 첫번 째 태그가 선택자이면
• 선택자:last-child = 마지막 태그가 선택자이면
• 선택자:nth-child(n) = n번 째 태그가 선택자이면
• 선택자:nth-last-child(n) = 뒤에서 n번 째 태그가 선택자이면

코드 예시

• html 코드

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

• css 코드

section > div {
  width:9%;
  height:100px;
  background-color:green;
  display:inline-block;
}

section > :nth-child(5n + 1) {
  background-color:gold;
}

section > :nth-child(5n + 3) {
  background-color:pink;
}

출력 결과