본문 바로가기

0x01 Programming/0x013 HTML5&CSS3

# 가상 클래스

가상클래스



맏이만 선택해 주는 :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)