게시 됨 업데이트 됨web1분안에 읽기 (약 200 단어)

first-child vs first-of-type

The pseudo class “:first-child” is potentially unsafe when doing server-side rendering. Try changing it to “:first-of-type”.
The pseudo class “:nth-child” is potentially unsafe when doing server-side rendering. Try changing it to “:nth-of-type”.

  • first-child를 사용하면 콘솔에 에러가 찍힌다
  • 그러면서 first-of-type을 사용하라고 알린다
  • 이참에 둘의 차이를 알아보았다
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
  h1:first-child {
    color: red;
  }
  h4:first-of-type {
    color: green;
  }
</style>
<body>
  <div>
    <h1>first-child로 빨간색이 된다</h1>
    <h4>first-of-type으로 인해 초록색이 된다</h4>
  </div>
  <hr />
  <div>
    <h4>first-of-type으로 인해 초록색이 된다</h4>
    <h1>효과를 안 받는다</h1>
  </div>
</body>

참고

first-child vs first-of-type

https://chinsun9.github.io/2021/11/28/first-child-vs-first-of-type/

Author

chinsung

Posted on

2021-11-28

Updated on

2021-11-28

Licensed under

#

댓글

카탈로그

×