HTML5+CSS3 - 스타일시트 가상클래스

가상클래스는 웹 문서의 소스에 실제로 존재하진 않지만, 필요에 의해 임의로 가상의 선택자를 지정하여 사용하는 것이다.

:link 선택자

문서 안의 하이퍼링크 중에서 아직 방문하지 않은 링크에 스타일을 적용한다.

텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시되는데, 이 모양을 변경할 때 사용한다.

a:link {

  color:black;

  text-decoration:none;

}

:visited 선택자

문서 안의 링크 중에 한 번 이상 방문한 링크에 스타일을 적용한다.

방문한 텍스트 링크는 기본적으로 자주색으로 표시되는데, 이 모양을 변경할 때 사용한다.

a:visited {

  color:black;

}

:active 선택자

해당 요소가 활성화되었을 때 스타일을 지정한다.

예로, 링크를 클릭했을 때 적용된다.

a:active {

  color:black;

}

:hover 선택자

해당 요소 위로 마우스 포인터를 올려놓았을 때 스타일을 지정한다.

a:hover {

  color:red;

}

:focus 선택자

해당 요소에 포커스가 맞춰졌을 때 스타일을 지정한다. (ex. 탭, 마우스 이동)

p:focus {

  background-color:yellow;

}

:root 선택자

문서 안의 루트 요소에 스타일을 적용한다.

HTML 문서는 HTML 태그가 루트요소이다.

:nth-child(n), :nth-last-child(n) 선택자

자식 요소 중 몇 번째 요소를 선택하여 스타일을 지정한다.

last의 경우 끝에서 부터 순서를 센다.

an+B 처럼 수식을 n에 사용할 수 도 있으며, 0부터 차례대로 정수를 대입하여 계산한다.

odd, even을 사용하여 홀수, 짝수를 지정할 수 있다.

특정요소

div p:nth-child(3)

홀수

div p:nth-child(odd) , div p:nth-child(2n+1)

짝수

div p:nth-child(even) , div p:nth-child(2n)

:nth-of-type(n), :nth-last-of-type(n) 선택자

몇 번째에 있는 특정 태그인지 지정해서 스타일을 지정한다.

뭔소린지 모르겠다.

:first-child, :last-child 선택자

첫번째, 마지막 자식 요소에 스타일을 적용한다.

:first-of-type, :last-of-type 선택자

형제 관계에 있는 요소 중에 첫번째, 마지막 요소에 스타일을 적용한다.

:only-child, :only-of-type 선택자

only-child는 부모요소 안의 자식요소가 유일하게 하나일 때 스타일을 적용한다.

only-of-type은 해당 요소가 유일한 요소일 때 스타일을 적용한다.

:target 선택자

웹 문서 내에서 다른 위치로 이동할 때는 anchor를 사용한다.

이 선택자를 사용해서 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 지정할 수 있다.

#intro:target {

  background-color:yellow;

}

:enabled, :disabled, :checked 선택자

enabled, disabled는 요소의 사용할 수 있는 상태와, 사용할 수 없는 상태에 스타일을 적용한다.

checked는 라디오버튼이나 체크박스가 체크되었을 때 스타일을 적용한다.

::before, ::after 선택자

특정 요소의 내용 앞이나 뒤에 지정한 내용을 만들 수 있다.

요소의 앞, 뒤에 텍스트나 이미지 등을 추가할 수 있다.

p::before {

  content: "넣을내용";

}

::selection 선택자

마우스로 드래그하여 선택되는 영역의 스타일을 지정할 수 있다.

:not 선택자

괄호 안에 있는 요소를 제외한 모든 부분에 스타일을 적용한다.

:not(h1) {

  color:blue;

}