CSS


게시글 'CSS 선택자(Selector) - 가상 클래스 선택자'에 대한 정보
CSS 선택자(Selector) - 가상 클래스 선택자
등록일 2010-04-05 조회 4,723
가상 클래스 선택자
- E:first-child (:first-child 수도 클래스)
- E:lang(c) (언어 수도 클래스)
- E:link, E:visited (링크 수도 클래스)
- E[foo], E[foo="warning"], E[foo~="warning"], E[lang|="en"] (속성 선택자)


E:first-child (:first-child 수도 클래스)
E 엘리먼트 중에서 맨처음에 나오는 E 엘리먼트를 선택한다. 리스트 등을 디자인 할 때 유용하게 사용할 수 있다. IE6에서는 구현되어 있지 않다.



E:lang(c) (언어 수도 클래스)
언어가 c 인 E엘리먼트를 선택한다. 문서 안에 한국어, 일본어, 중국어가 섞여 있고 이 글자들에 각각 다른 스타일을 적용해야 할때 유용하게 사용할 수 있는 셀렉터이다. IE6에서는 구현되어 있지 않다.


E:link, E:visited (링크 수도 클래스)
링크인 E 엘리먼트와 방문한 E 링크 엘리먼트를 선택한다. HTML 4.01 이나 XHTML 1.0 에서는 a 엘리먼트가 해당된다.


E:active, E:hover, E:focus (동적 수도 클래스)
사용자 액션이 active, hover, focus 인 E 엘리먼트들을 선택한다.
input:hover,
input:focus {
background: #ffe;
}
와 같이 사용하면 input에 마우스 포인터가 오버 되거나 커서가 위치해 있을때의 배경색을 지정 할 수 있다. 아래를 보면 글을 작성하고 있는 폼의 배경색이 다른 것을 볼 수 있다.IE6는 a 엘리먼트에서만 구현 되어 있고, :focus는 구현되어 있지 않다.

E[foo], E[foo="warning"], E[foo~="warning"], E[lang|="en"] (속성 선택자)
foo라는 속성과 warning이라는 값을 가진 E엘리먼트를 선택한다.
<input type="text" />
<textarea></textarea>
위와 같은 폼 컨트롤의 경우 사이트 전반적으로 일정한 보터를 주는 경우가 있는데 이럴 경우 아래와 같이 손쉽게 스타일을 적용 할 수 있다. IE6에서는 구현되어 있지 않다.
input[type="text"],
textarea {
border: 1px solid #eee;
}