so woon!

[의사 클래스] first-of-type 및 nth-of-type, last-of-type 의사 클래스 본문

CSS/개념정리

[의사 클래스] first-of-type 및 nth-of-type, last-of-type 의사 클래스

xowoony 2022. 9. 7. 09:05

학습일 : 2022. 09. 05

first-of-type 의사 클래스
first-of-type 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중
동일한 종류의 첫번째 요소를 선택하기 위해 사용한다.
다음과 같이 작성한다. ("는 없는 것으로 한다.)

 "선택자":first-of-type {
      "속성" : "속성 값";
      "속성" : "속성 값";
      "속성" : "속성 값";
  }

 

 

nth-of-type 의사 클래스
nth-of-type(n) 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 동일한 종류의 n번째 요소를 선택하기 위해 사용한다.
이 때 n 값은 1이상의 자연수 혹은 xn+y (이때 n은 자동 증가, x 배수와 y 오프셋), odd(홀수 번째), even(짝수 번째)로
지정가능하다.
이때 순번은 1부터 시작한다. (0 아님)
가령 nth-of-type(2n+1)이라는 값은 3, 5, 7, 9... 번째 값을 의미하는데 n이 1부터 1씩 증가한다고 생각하면 됨.
단, n이 음수일 경우, 가령, nth-of-type(-n+3)은, (-0+3), (-1+3), (-2+3) 으로 그 값이 0을 초과할 때 -0부터 1씩 감소한다고 계산하면 됨.
다음과 같이 작성한다. ("는 없는 것으로 한다.)

  "선택자":nth-of-type(3) {
      "속성" : "속성 값";
      "속성" : "속성 값";
      "속성" : "속성 값";
  }



 


last-of-type 의사 클래스
last-of-type 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 동일한 종류의 마지막 요소를 선택하기 위해 사용한다.
다음과 같이 작성한다. ("는 없는 것으로 한다.)

"선택자":last-of-type {
      "속성" : "속성 값";
      "속성" : "속성 값";
      "속성" : "속성 값";
  }
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>first-of-type, nth-of-type, last-of-type 가상 클래스</title>
    <style>
        body > div > a:nth-child(5)❤ {
            color: red;
        }
        body > div > a:nth-of-type(4)❤ {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <b>메뉴</b>
        <br>
        <a>짜장면</a>
        <br>
        <a>짬뽕</a>
        <br>
        <a>중화비빔밥</a>
        <br>
        <a>마들렌</a>
    </div>
</body>
</html>

==============실행결과=================

저작자표시 비영리 변경금지 (새창열림)

'CSS > 개념정리' 카테고리의 다른 글

[의사 클래스] Not 의사 클래스(Pseudo Class)  (0) 2022.09.07
[의사 클래스] Focus 의사 클래스(Pseudo Class)  (0) 2022.09.07
[의사 클래스] first-child 및 nth-child, last-child 의사 클래스  (0) 2022.09.07
[의사클래스] disabled 의사 클래스  (0) 2022.09.07
[의사 클래스] Checked 의사 클래스(Pseudo Class)  (0) 2022.09.06
'CSS/개념정리' Related Articles more
Comments