CSS :nth-child 유사클래스
순차적 자식선택자이다. 자식선택자중 li라던가 table의 tr태그에 쓰이게 되는데 예제를 보자
| 홀수 |
| 짝수 |
| 홀수 |
| 짝수 |
이표는 홀수의 번쨰의 경우 표의 색깔을 #FF9999 로 한경우이다. 이렇게 할경우 소스는 다음과 같다.
| 홀수 |
| 짝수 |
| 홀수 |
| 짝수 |
.odd{background-color:#ff9999;}
.even{background-color:#ffcccc;}
이와칸이 별도로 클래스를 지정해주고 그에 맞게 색을 지정하게 해주어야한다. 표나, 리스트의 행열이 적으면 간편하나 길면 일일이 클래스 지정해주기가 귀찮아 진다.특히 통계자료에 쓰일 표같은 경우는 더욱 그렇다. 이같은 점을 쉽게 사용할 수 있도록 하는 방법이 :nth-child를 이용하는것이다.사용방법은 다음과 같다
E:nth-child(){}
/*an E element, the n-th child of its parent
(E 엘리먼트가 부모이며 그순차적 자식선택자를 괄호안의 방법으로 선택한다)
*/
E:nth-child()에 괄호 안에 따라서 지정할 수 있는데 가장 간단한 변수인 odd(홀수), even(짝수)을 들수 있다. 예로 E:nth-child(odd){}이렇게하면 롷수번째가 선택되고 E:nth-child(even)이렇게하면 짝수번쨰가 선택되는 것이다.그럼앞서보인표에 클래스 부여없이 선택할려면 다음과같다.
tr:nth-child(odd){background-color:#ff9999;}
/*tr엘리먼트의 홀수번쨰 배경색을 #ff9999로*/
tr:nth-child(even){background-color:#ffcccc;}
/*tr엘리먼트의 짝수번쨰 배경색을 #ff9999로*/
이와 같이하면 별도 클래스 지정없이 간편하게 해줄수있다
좀더 고급스럽게 사용하기
단순히 짝수 홀수만 사용한다면 그다지흥미를 못느낄 것이다. 하지만 :nth-child()의 괄호안에 수학 공식을 넣기에 따라 선택할수 있다. 학교에서 배운 수열을 생각해보자 1, 3, 5 ,7 ,9 .... 이수열의 일반화 공식은? 2n+1 이다. (모르는 분은 수학공부부터....)이처럼공식을 넣어줄수있다. 물론 2n+1 이건 홀수 선택 odd와 같다. 그러면 1, 4,7, 10, 13...이런경우는? 3n+1이다. 예제 소스를 보자.아그리고 n은 0부터 시작한다.
- 첫번쨰
- 두번쨰
- 세번쨰 ... .. .
- 열번쨰
li:nth-child(1){}/*li엘리먼트중 첫번쨰 선택*/
li:nth-child(2){}/*li엘리먼트중 두번쨰 선택*/
li:nth-child(n){}/*li엘리먼트중 n번쨰 선택 0부터시작하니 모두선택된다*/
li:nth-child(2n){}/*li엘리먼트중 2n번쨰 선택 0,2,4,6...*/
마지막으로 1, 4,7, 10, 13...로 선택할경우 폰트 소스와 그 결과를 보자
li:nth-child(3n+1){ font-size:20px;}
/*1, 4,7, 10, 13..번째의 경우 폰트 크기를 20px로*/
- 첫번쨰
- 두번쨰
- 세번쨰
- 네번쨰
- 다섯번쨰
- 여섯번쨰
- 일곱번쨰
- 여덟번쨰
- 아홉번쨰
더자세한 내용을 알고 싶으면 여기로 가보자
댓글