사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들거나 웹 요소의 상태에 따라 스타일을 지정할 때 가상 클래스 선택자를 사용합니다.
목차
사용자 동작에 반응하는 가상 클래스
다음 가상 클래스 선택자들은 가상 클래스 선택자 중 자주 사용하는 것들을 모아 놓은 것입니다.
:link
:link 가상 클래스 선택자는 링크의 밑줄을 없애거나 텍스트 색상을 바꿀려고 할 때
사용합니다. 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에
스타일을 적용합니다. 예를 들면 다음은
<a> 요소에 방문하지 않은 링크 색상을 하늘색으로 만들고
링크의 밑줄을 제거합니다.
a:link {
color: skyblue;
text-decoration: none;
}
텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시됩니다.
:visited
:visited 가상 클래스 선택자는 사용자가 방문했던 링크를 일반 텍스트 링크와
색상이 달라지지 않게 하기 위해 사용합니다. 문서의 링크 중에서 한 번 이상
방문한 링크에 스타일을 적용합니다. 예를 들면 다음은
<a> 요소에 방문하지 않은 링크 색상을 핑크색으로 만들고
링크의 밑줄을 제거합니다.
a:visited {
color: pink;
text-decoration: none;
}
방문한 텍스트 링크는 기본적으로 자주색으로 표시됩니다.
:hover
:hover 가상 클래스 선택자는 웹 요소 위로 마우스 커서를 올려놓을 때 스타일을
지정합니다. 예를 들면 다음은 <a> 요소에 마우스를 올렸을 때
글자색을 빨간색으로 하고 밑줄을 만듭니다.
a:hover {
color: red;
text-decoration: underline;
}
:active
:active 가상 클래스 선택자는 링크나 이미지 등 웹 요소를 활성화 했을 때(누르고
있을 때)의 스타일을 지정합니다. 예를 들면 다음은
<a> 요소를 마우스로 누르고 있을 때 배경색을 초록색으로 하고
텍스트 색상을 흰색으로 바꿉니다.
a:active {
color: white;
background-color: green;
}
텍스트 링크를 누르고 있으면 기본적으로 빨간색으로 표시됩니다.
:focus
:focus 가상 클래스 선택자는 웹 요소에 포커스가 맞추어졌을 때의 스타일을
지정합니다. 아이디를 입력하기 위해 텍스트 필드 안에 마우스 커서를 갖다 놓거나
탭을 눌러 초점을 이동했을 때의 스타일을 지정할 수 있습니다. 예를 들면 다음은
<input> 요소에 텍스트를 입력하기 위해 포커스 되었을 때
박스에 테두리를 하늘색으로 만듭니다.
input:focus {
border-color: skyblue;
}
링크가 걸린 글자 꾸미기
링크가 걸린 글자 꾸미는 방법은 <a> 태그를 선택하여
꾸밉니다.
그 외 가상 클래스
:target
:target 선택자는 문서 안에서 다른 위치로 이동할 때 이용하는 앵커의 목적지가 되는 부분의 스타일을 지정할 수 있습니다. 예를 들면 다음은 타겟으로 지정된 #toc-01 요소의 글자 색을 노란색으로 바꿉니다.
#toc-01:target {
color: yellow;
}
:not
:not 선택자는 특정 요소에서 괄호 안의 선택자를 제외한 모든 요소에 스타일을
지정할 수 있습니다. 예를 들면 다음은 #eg가 아닌 모든
<p> 요소에서 글자 색을 파란색으로 바꿉니다.
p:not(#eg) {
color: blue;
}
:empty
:empty는 내용이 없는 비어있는 요소를 선택합니다. 예를 들면 다음은
<li> 요소 중 내용이 없는 것을 선택합니다.
li:empty
즉
<li></li>
가 선택됩니다. 공백도 내용이 있는 것으로 보고 선택하지 않습니다.
따라서
<li> </li>
처럼 빈 칸이 있는 것은 선택되지 않습니다.
:enabled 와 :disalbed
:enabled 가상 클래스 선택자는 해당 요소가 사용 가능한 상태일 때의 스타일을 지정할 수 있고 :disalbed 가상 클래스 선택자는 해당 요소가 사용 불가능한 상태일 때의 스타일을 지정할 수 있습니다.
예를 들면 여러 줄의 텍스트를 입력할 수 있는 텍스트 영역(textarea)를 입력칸으로 사용할 때는 enabled 상태이지만 회원 약관 등을 보여줄 때는 사용자가 내용을 보기만 해야하므로 disabeld 상태로 만듭니다.
textarea:disabled {
background-color: #bbb;
border: 1px solid #ccc;
}
:checked
라디오 박스나 체크박스에서 사용자가 해당 항목을 선택 했을 때(체크했을 때)의 스타일을 지정할 수 있습니다.
예를 들면 다음은 체크박스 버튼 항목을 클릭하면 항목 텍스트가 파란색으로 바뀝니다.
input[type="checkbox"]:checked + span {
color: blue;
}
:nth-child(), :nth-last-child()
여러 개의 항목이 일렬(가로나 세로)로 나열되 있는 경우, class나 id를 사용하지 않고 nth-child(n)이나 nth-last-child(n)을 사용하면 항목이 몇 번째에 있는지를 따져 스타일을 적용할수 있습니다.
:nth-child(), :nth-last-child()
가상 요소
가상 요소(Pseudo-elements)는 요소의 특정 부분을 선택합니다. 가상클래스는 콜론을 한 개(:), 가상요소는 콜론을 두 개(::) 씁니다. 하지만 콜론을 한 개(:)만 써도 대부분의 브라우저에서 제대로 작동합니다.
가상 요소 가상 요소와 가상 클래스 순서