pseudo selectors_1

• 좀 더 세부적으로 element를 선택하여 조절가능

*이전에 알던 3가지은 방법 tag 이름만 쓰기 / #를 쓰면 id 나타냄 / .을 쓰면 class 나타냄

tag:first-child {}, tag:last-child {}

<style>
  body {
    height: 1000vh;
    margin: 50px;
  }
  div {
    width: 150px;
    height: 150px;
    background-color: wheat;
  }
  div:last-child {
    background-color: teal;
  }
  div:first-child {
    background-color: tomato;
  }
</style>

tag:nth-child(n) {}

<style>
  body {
    height: 1000vh;
    margin: 50px;
  }
  span {
    background-color: tomato;
  }
  span:nth-child(2),
  span:nth-child(4) {
    background-color: teal;
  }
</style>

tag:nth-child(even) {}, tag:nth-child(odd) {}

  span:nth-child(even) {
    background-color: teal;
  }

  span:nth-child(odd) {
    background-color: teal;
  }

-> even:짝수마다, odd:홀수마다 적용

tag:nth-child(3n+1) {}

  span:nth-child(3n+1) {
    background-color: teal;
  }

-> 3n+1마다 적용, 이런 식으로 4n, 5n+1 다 적용가능.