CSS

[ CSS ] nth-child, nth-of-type 가상선택자 정리

yebeen 2023. 2. 6. 01:20

 

 

css 코드를 작성하면서 selector를 사용하다 보면 분명 맞게 nth-child를 작성한 것 같은데

적용이 안되거나 엉뚱한 곳에 적용되는 현상이 발생했다.

이를 해결해나가며 얻었던 정보와 공부한 내용들을 써볼까 한다.

 

 

 

첫 번째. :nth-child(n)는 괄호안에 접근하고싶은 요소의 번호(순서상의 위치)를 적어 사용한다.

 

특히 첫번째 요소의 경우 [ nth-child(1)이나 first-child() ]를 사용할 수 있고

마지막 요소의 경우 [ last-child() ]를 사용하면 접근할 수 있다.

끝에서부터 세려면 [ nth-last-child() ] 를 사용하면 된다.

 

그렇다면 특정 규칙을 가진 번째 수의 요소들에 접근할 때  하나하나 적어야 할까?

답은 아니다.

nth-child()의 괄호 안에는 수식을 사용 가능하기에 이를 이용하면 된다.

 

nth-child(odd or 2n+1) = 2n+1번째의 요소들을 가리킨다. (홀수)

nth-child(even or 2n) = 2n 번째의 요소들을 가르킨다. (짝수)

nth-child(2n+5) = 7의 배수 번째의 요소들을 가르킨다.

등 다양하게 작성할 수 있다!

 

 

 

 

앞서 적은 nth-child 적용이 되지 않는 문제의 원인은 아래의 두 가지 사실을 알지 못한 상태로 사용했기 때문인데 

두 번째. tagName:nth-child(n)의 경우 같은 부모를 가진 형제 요소들의 순서를 기준으로 적용이 된다라는 점이다.

세 번째. tagName과 선택된 요소의 타입은 일치해야 한다.

 

 

제대로 공부를 안 하고 사용했던 때에는 아래의 코드에서 div:nth-child(2)라고 했을 때

body에 있는 div 중에서 2번째라고 생각하며 코드를 작성했었다.

 

 

하지만 실제로 아래 코드를 보면

코드가 작동하는 방식은 가장 먼저 나오는 div가 선택되고 :nth-child(2)가 찾아진다.

이때 nth-child(2)는 모든 자식 요소들을 기준으로 순서가 적용되기에 2를 가진 <p>이다.

그리고 div와 p의 타입은 다르기에 사진과 같이 적용되지 않는다.

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      div,
      p {
        width: 50px;
        height: 50px;
        font-size: 20px;
        background-color: antiquewhite;
      }
      div:nth-child(2) {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <p>2</p>
    <div>3</div>
    <p>4</p>
    <div>5</div>
    <p>6</p>
  </body>
</html>

 

 

그렇다면 어떻게 적어야 2번째 div(숫자 3을 가진 div)에 css를 입힐 수 있을까?

바로 n의 값을 2가 아닌 3으로 변경해 주면 된다!

( 모든 자식 요소를 베이스로 순서가 배정되기에 해당 div는 3번째의 자식요소이다. )

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      div,
      p {
        width: 50px;
        height: 50px;
        font-size: 20px;
        background-color: antiquewhite;
      }
      div:nth-child(3) {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <p>2</p>
    <div>3</div>
    <p>4</p>
    <div>5</div>
    <p>6</p>
  </body>
</html>

 

 

 

 

 

[ nth-child() 쓰면서 주의할 점 ]

 

아래의 코드를 보면 p:nth-child(2)라고 적혀있는데

div를 부모로 4개의 p가 자식으로 있기에 이 중 2번째 자식인 p, 즉 숫자 2 박스의 배경 색이 달라지며

body를 부모로 div, p, p가 자식으로 있기에 이 중 2번째 자식인 p, 즉 숫자 5 박스의 배경 색 또한 달라진다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 100vh;
      }
      p {
        width: 50px;
        height: 50px;
        font-size: 20px;
        border: 1px solid black;
        background-color: antiquewhite;
      }
      p:nth-child(2) {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
    </div>
    <p>5</p>
    <p>6</p>
  </body>
</html>

 

 

 

만약 둘 중의 하나의 박스에만 배경 색을 바꾸고 싶다면

 body > p:nth-child(2) 또는 div > p:nth-child(2)라고 작성해 주면 된다.

 

 

바로 부모를 지정해 주는 건데

' tagname > ' 는 tagname의 바로 아래 자식들을 가리킨다.

이걸 사용해주면 해당 부모를 가진 자식들안에서만 선택되어진다.

 

 

아래 코드를 바탕으로 body 아래의 자식은 div, 5를 가진 p, 6을 가진 p를 포함하고

div 아래의 자식은 1,2,3,4를 가진 p를 포함한다.

 

      body p:nth-child(2) {
        background-color: pink;
      }
      div p:nth-child(2) {
        background-color: rgb(255, 30, 67);
      }

 

 

 

 

tagName:nth-of-type() 

이 선택자는 tagName을 가진 요소 중 n번째 요소를 선택한다.

맞다... 위에서 ( div:nth-child(2)라고 했을 때 body에 있는 div 중에서 2번째라고 생각하며 코드를 작성했었다.)라고 

말했던 생각을 이뤄주는 가상 선택자이다. 

 

이를 사용해 div:nth-of-type(2)를 입력하면 제대로 (2번째 div인) 3이라는 숫자를 가진 박스에 색이 변하게 된다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      div,
      p {
        width: 50px;
        height: 50px;
        font-size: 20px;
        border: 1px solid black;
        background-color: antiquewhite;
      }
      div:nth-of-type(2) {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <p>2</p>
    <div>3</div>
    <p>4</p>
    <div>5</div>
    <p>6</p>
  </body>
</html>

 

 

[ 참고 ] 

https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child

https://lalacode.tistory.com/6

https://thrillfighter.tistory.com/575

 

'CSS' 카테고리의 다른 글

[ CSS ] Grid border 만들기  (0) 2023.04.06
[ CSS ] Grid 사용하기 , element 위치설정, content와 grid 위치설정  (0) 2023.04.05
[ CSS ] input type="color" 디자인 변경하기  (0) 2023.02.02
[ CSS ] flex 정리 (위치 조절, 요소간의 순서 변경 및 flex-grow, flex-shrink, flex-basis)  (0) 2022.12.18
[CSS] display - block, inline, inline-box, flex 차이점  (0) 2022.12.15

'CSS'의 다른글

  • 현재글[ CSS ] nth-child, nth-of-type 가상선택자 정리

관련글

티스토리툴바