<HTML5+CSS3>가상클래스

 

:enabled , :disabled , :checked 선택자

-인에이블과 디사블은 요소 중에서 사용할 수 있는 상태와 사용할 수 없는 상태의 스타일을 지정할 수 있다.

예를 들어,

게시판에서 사용자가 입력할수 있는 부분을 enabled상태

회원 약관등을 보여줄 때는 사용자가 내용을 보기만 해야하므로 disabled상태이다.

checked클래스 선택자는 라디오 버튼이나 체크박스가 체크되었을 때 적용할 스타일을 지정한다.

ex)textarea:disabled { cursor:pointer; }

->포인터를 가져가면 내용을 입력할 수 있는 커서로 변하지 않고 포인터 형태로 표시하는 스타일

 

그 외의 가상 크래스

 

::before, ::after 선택자

-특정한 요소의 내용 앞이나 뒤에 지정한 내용을 만들 수 있다. 요소의 앞이나 뒤에 텍스트나 이미지 등을 추가할 수 있다.

 

다음 예는 <p>태그로 지정한 모든 텍스트 단락 맨 앞에 “내용 :”이라는 내용을 추가한다.

ex) p ::before { content : “내용 ; ”; }

 

::selection 선택자

-사용자가 마우스로 선택했을 때 커서가 드래그되어 선택되는 영역의 스타일을 지정할 수 있다. 다음은 텍스트 부븐을 드래그했을 때 해당 색상을 지정한 것이다.

ex) ::selection { color : #00ff00; }

:not 선택자

-not 선택자는 그 이름에서도 알 수 있듯 부정의 의미이다. “괄호 안에 있는 요소를 제외한”

이라는 뜻으로 :not(p)라고하면 <p>태그가 적용되지 않는 모든 부분에 대해 스타일을 적용한다.

다음 예는 h1요소가 아닌 모든 요소의 글자색을 파란색으로 지정하는 스타일이다.

ex) :not(h1) { color:blue; }