선택자란 태그, id, class 등과 같이 html 문서에 존재하는 것들을 지정하는 것이다.
반면에 가상 클래스 선택자는 어떤 상태를 지정한다. 이런 상태는 태그, id, class 처럼 html문서 상에 있는 것이 아니다. 따라서 가상 선택자라고 한다.
예를들어 상태를 지정하는 가상 선택자에는 마우스를 올려 놓은 상태를 의미하는 hover 선택자, 방문하지 않은 링크를 나타내는 link 선택자, 이미 방문했던 링크를 선택하는 visited 선택자 등이 있다.
가상 클래스 선택자를 사용해서 상태에 따른 스타일을 지정하는 것이 오늘 공부할 내용이다.
하나씩 살펴보자.
- link, visited 가상 선택자
웹페이지에 있는 링크들은 기본적으로 파란색이다. 사용자가 링크를 클릭을 하면 오른쪽과 같이 보라색으로 변한다. 클릭 전과 후의 링크의 상태가 변한 것이다. 우리는 클릭 전후의 상태를 상태선택자로 선택해서 스타일을 입힐 수 있다.
: link
방문하지 않은 링크를 선택
: visited
방문한 링크를 선택
a:link { color:darkslategrey;}
설명 a 태그 중에서 링크를 방문하지 않은 태그의 내용을 색을 darkslategrey로 지정
a:visited { color:aquamarine;}
설명 a 태그 중에서 방문한 태그의 내용을 색을 aquamarine으로 지정
- active, hover 가상 선택자
위 예의 문장에 마우스를 올려놓았을 때 빨간 색으로 바뀌도록 추가하려면
그런데 이렇게 하면 active 가상 선택자는 동작하지 않는다. 두 개의 선택자가 동시에 동작하면 나중에 있는 녀석만 적용되기 때문이다. 주의하도록 하자.
: active
마우스로 클릭한 상태
:hover
마우스를 위에 올린 상태
p:active{color: gold;}
p 태그의 내용을 클릭하면 색을 gold 한다.
p:hover{color:red;}
p 태그의 내용 위에 마우스를 올려 놓으면 색을 red로 한다.
- focus 가상 선택자
: focus
포커스를 가질 때(예를들어 input 박스에서 텍스트를 입력 가능한 상태)
input:focus { background : green;}
input 박스에 포커스가 있을 때 색을 green으로 바꿈
- first-child, last-child, nth-child(n), nth-last-child(n) 가상 선택자
:first-child
첫 번째 태그 요소 선택
:last-child
마지막 태그 요소 선택
:nth-child(n)
n 번째 태그 요소 선택
:nth-last-child(n)
끝에서 부터 n 번째 태그 요소 선택
li:nth-child(1)
li 태그가 있을 때 이와 동일 레벨에 있는 태그들 중에 1번째 요소를 선택한다.
li:nth-last-child(2)
li 태그가 있을 때 이와 동일 레벨에 있는 태그들 중에 마지막 에서 2번째 요소를 선택한다.
li:nth-last-child(1)
li 태그가 있을 때 이와 동일 레벨에 있는 태그들 중에 마지막 에서 1번째 요소를 선택한다. 위 예에서 li 태그와 동일 레벨에 있는 마지막 태그가 p 태그다 이 태그가 순서에 포함되지만 선택되지는 않는다 따라서 위 코드에서 적용이 안된 것이다.
※ 참고
li:nth-last-of-type(1) 이라고 하면 p 태그는 세지 않고 li 태그에 대해서만 순서를 따진다. li:last-of-type과 동일함
li:nth-first-of type(1) 역시 마찬가지다. li:first-of-type과 동일하다.
※ 참고 : 가상 엘리먼트(element) 선택자라는 것도 있다. css로 문서 내용을 삽입할 때 쓰는데 (::before, ::after) 우선 이런 것이 있다고만 알아두자.