CSS) 가상 선택자 정리

nth-child, nth-of-type 정리

:nth-child(N)= 부모안에 모든 요소 중 N번째 요소

A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소

:first-child= 부모안에 모든 요소 중 첫번째 요소

:last-child= 부모안에 모든 요소 중 마지막 요소

A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소

A:last-of-type= 부모안에 A라는 요소 중 마지막 요소

 

예제>>

.first :nth-child(2n){
            background-color: aqua;
        }
        .first :nth-child(2n+1) {
            background-color: yellow;
        }

        /* 첫번째 요소부터 5번째 요소까지 2개마다 선택 */
        .second span:nth-child(-2n+5){
            background-color: red;
        }
        /* 6번째부터 모두 선택 */
        .second span:nth-child(n+6){
            background-color: blueviolet;
        }
        /* 선택자를 두번 사용하여 교집합인 요소만 선택할 수 있다. */
        .third :nth-child(n+3):nth-child(-n+8) {
            background-color: brown;
        }

        .fourth p:first-of-type {
            background-color: orange;
        }
        .fourth span:last-of-type {
            background-color: orangered;
        }

 

>>결과