[CSS 스타일 샘플] :nth-child(1)

제목 스타일을 만들다 보면 첫번째 제목은 margin-top이 필요 없는데, 본문 내에 두번째 제목 부터 margin-top이 필요할 때가 있습니다.

귀찮아서 모두 margin-top을 주면 첫째 제목 여백이 벌어져 이상하고, 첫번째 제목만 다른 스타일로 잡기는 귀찮고...

​

 

이럴 때 쓸 수 있는 클래스가 :nth-child(*) 예요.

​

클래스 중 :가 붙는건 의사(pseudo) 클래스라고 합니다.

CSS에서 pseudo 클래스/엘리먼트(:: 2개 붙음)는 클래스/엘리먼트는 아니지만 클래스/엘리먼트에 특수한 스타일을 부여할 때 사용합니다.

​

:nth-child(*)는 클래스의 순서 대로 스타일을 부여할 때 사용합니다.

영어 서수로 3th, 5th 할 때의 nth지요.

 

제목을 h2 태그로 지정하고

​

h2 {

margin-top : 5em;

margin-bottom : 2em;

}

​

이렇게 스타일을 줬는데, 각 장 첫번째 제목만 margin-top을 빼고싶다.

​

h2:nth-child(1) {

margin-top : 0;

}

​

이 스타일을 추가합니다.

그럼 처음 나온 h2는 margin-top : 0이 적용되고, 두번째 부터는 margin-top: 5em;이 적용됩니다.

​

이 클래스는 다양하게 활용할 수 있어요.

순서대로 똑같은 스타일이 적용되어 있는데, 그 중 특정 순서 하나만 스타일을 바꿔야 할 때 사용하면 좋습니다.