가상 클래스(pseudo-Classes)

가상 클래스(pseudo-Classes)는 이름 그대로 클래스 아래에 다시 가상(pseudo-) 클래스를 만드는 방법이다. 의사 클래스로 옮기는 글이 많은데 아무래도 의사는 바로 뜻이 생각나지 않는다. 차라리 유사나 가짜 또는 닮음으로 옮기는 것이 좋겠다.

여기서는 가상으로 적기로 한다. 시에스에스3에서는 가상 클래스로 다양한 디자인을 만들 수 있다. 여러 가지 가상 클래스가 있지만 여기서는 목록을 꾸밀 때 좋은 nth-child를 정리해 둔다.

순서가 없는 목록(unodered list)인 클래스 <ul class=list> 안에 li가 있다. 여기서 ul이 부모이고 li는 자식이다. 자식은 차례로 번호가 매겨져 있다. 자식마다 각각 다른 디자인을 해주고 싶을 때 가상 클래스가 필요하다.

먼저 구분선을 넣어 보자.

.list li {border-top: 1px solid #ddd;}

이것만으로는 마지막 아래에 구분선이 없어서 뭔가 허전하다.

.list li:last-child {border-top: 1px solid #ddd;}

마지막에도 구분선이 생겨서 보기 좋아졌다. 다음은 짝수 번째 자식을 글자 색을 바꾸자.

.list li:nth-child(even){ color: #f00; }

셋째 자식의 글자 색만 따로 바꿀 수 있다.

.list li:nth-child(3){ color: #00f; }

 

See the Pen exercises by 박영호 (@lyrsqwja) on CodePen.

나머지가 같은 아이들을 선택하여 따로 스타일을 주려면 an+b의 꼴을 쓰면 된다. 이때 n은 0부터 시작한다. 예를 들어 3으로 나눈 나머지가 1인 자식들을 고를 때는 아래와 같이 쓰면 된다.

.list li:nth-child(3n+1){ color: #00f; }

 

developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

의사 클래스 - CSS: Cascading Style Sheets | MDN