코드/Html & CSS

유사 클래스 선택자

Yeah-Panda 2011. 5. 11. 23:17



문서 구조를 기반으로 엘리먼트를 지정하는 것이 아니라, 폼요소나 링크의 다양한 상태에
대해서 스타일을 지정해야 할 경우가 있습니다.
유사 클래스 선택자 (psedo-class selector) 를 사용한다면
이런 작업을 할수있습니다.

/* 방문하지 않은 링크를 파란색으로 표시 */
a:link { color:blue; }

/* 방문했던 링크를 녹색으로 표시 */
a:visited { color:green; }

/*마우스가 올라오거나 클릭했을 때 링크를 빨간 색으로 표시 */
a:hover, a:active { color:red; }

/* 테이블 행에 마우스가 올라올대 빨간색으로 표시 */
tr:hover {background - color :red; }

/* 입력 요소에 포커스가 갔을 때 노란색으로 표시 */
input:focus {background - color:yellow; }

:link 와  :visited 같은 링크 관련 유사 클래스는 앵커 엘리먼트에만 적용할수 있습니다.
:hover, :active, :focus 같은 동적 유사 클래스는 이론적으로는 모든 엘리먼트에
적용할수 있습니다.
하지만 파이어폭스 같은 몇몇 최근 브라우저만 이 기능을 지원합니다
IE 6 이하 버전은 앵커 링크에 대해서만  :active , :hover 을 지원하고
:focus 는 전혀 지원하지 않고 있습니다.





'코드 > Html & CSS' 카테고리의 다른 글

상위 요소 값의 상속  (0) 2011.05.28
Inherit, 자식 선택자.  (0) 2011.05.28
각종 속성 타겟팅.  (0) 2011.05.18
hover IE7 Bug  (0) 2011.05.17
브라우저 모드  (0) 2011.05.11