문서 구조를 기반으로 엘리먼트를 지정하는 것이 아니라, 폼요소나 링크의 다양한 상태에
대해서 스타일을 지정해야 할 경우가 있습니다.
유사 클래스 선택자 (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 |