가상클래스
맏이만 선택해 주는 :first-child 가상클래스
가상클래스는 특정한 '사건'이 발생하면 사용할 수 있습니다. 그리고 특정한 '조건' 에도 사용할 수 있습니다.
:first-child 가상 클래스는 동일한 요소 중 가장 앞에 위치한 요소를 선택하도록 도와줍니다.
HTML 마크업
<ul>
<li>은혜갚은 까치</li>
<li>신데렐라</li>
<li>흥부놀부전</li>
<li>백설공주</li>
</ul>
CSS
li:first-child {font-weight:bold;color:red;font-size:25px;}
위의 예제는 4개의 동화 이름을 <ul>을 이용해서 목록으로 만든 것입니다. CSS를 보면 :first-child 가상 클래스를 이용해서
맨 앞에 있는 <li>만 텍스트의 크기와 색상을 바꾸도록 해두었습니다. :first-child는 이처럼 지정한 태그 중 가장 선두에
위치하는 녀석을 선택할 수 있게 해줍니다. 결과 화면은 다음 그림과 같습니다.
라디오 버튼과 체크박스가 체크되어 있는지 점검하는 :checked 가상클래스
해당 클래스는 CSS3에 새로 추가된 가상 클래스입니다. 라디오 버튼이나 체크박스는 사용자가 직접 체크하고 체크를 해제할
수 있는 UI 입니다. 이것들이 체크 되었을떄는 'checked'속성을 가집니다. 이 가상 클래스는 'checked' 속성을 가져와서
동작합니다.
HTML 마크업
<label><input type="checkbox" /><span>하하하</span></label>
CSS
input:checked+span {font-weight:bold; color:#ff0000;}
체크박스가 체크된 상태일 경우 <span>으로 감싸져 있는 텍스트를 굵게 하고 빨간색으로 만듭니다. 형제선택자 '+' 와
':checked' 가상 클래스 선택자를 결합하여 사용하였습니다.
':checked' 가상 클래스가 작동하면 <span> 에 있는 글자의 스타일을 바꾸도록 되어 있습니다.
참고로 이 선택자는 IE 8 이하 버전에서는 작동하지 않습니다.
자유롭게 반복하거나 선택하여 요소를 스타일링하는 :nth-child 가상클래스
:nth-child 가상 클래스는 CSS3에서 새로 소개된 가상 클래스입니다.
해당 클래스를 사용하면 테이블에서 격줄로 건너뛰면서 색상을 칠해주는 등 사용자에게 시각적인 효과를 부여할 수 있습니다.
HTML 마크업
<ul>
<li>은혜갚은 까치</li>
<li>신데렐라</li>
<li>흥부놀부전</li>
<li>백설공주</li>
</ul>
CSS
li:nth-child(odd) {font-weight:bold;color:red;font-size:25px;}
<:nth-child 가상 클래스에서 받을 수 있는 인자의 종류>
odd |
홀수번 요소만 순서대로 선택함 |
even |
짝수번 요소만 순서대로 선택함 |
숫자 |
임의의 숫자값을 넣어서 자유자재로 선택 |
Example) tr:nth-child(2n + 1) , tr:nth-child(4)
'0x01 Programming > 0x013 HTML5&CSS3' 카테고리의 다른 글
# 박스모델 (0) | 2012.09.20 |
---|---|
# CSS의 특수 선택자 (0) | 2012.09.19 |
# HTML문서에 CSS를 적용하는 세가지 방법 (0) | 2012.09.18 |
#콘텐츠의 흐름, 블록레벨 요소와 인라인 요소 (0) | 2012.08.27 |
#HTML5의 새로운 요소(hgroup,article,section) (0) | 2012.08.27 |