:nth-child() 사용법

CSS

자라나라나무나무나 2022. 3. 22. 19:59

html 문서에서 같은 형태의 요소들이 반복될 때,
이 요소들을 특정 순서에 따라 CSS속성을 다르게 지정하고 싶을 때, nth-child 선택지를 사용할 수 있다.

HTML

<body>
	<div>
        <p> 첫째 </p>
        <p> 둘째 </p>
        <p> 셋째 </p>
        <p> 넷째 </p>
        <p> 다섯째 </p>
    </div>
</body>

CSS

    p:nth-child(2) {
        color: blueviolet;
    }

()괄호 안의 숫자는 0부터 시작하는 숫자가 아니고 1부터 시작한다.