[CSS] CSS의 가상 선택자(Pseudo-class Selectors)

CSS는 선택자(ex. h1, .class 등)를 잡아 HTML 요소에 스타일을 준다.

CSS가 선택자를 잡는 기준은 5가지로 나눌 수 있다.

 

1. Simple Selectors(요소의 name,id,class를 기준으로 선택 - 일반적인 방법)
2. Combinator Selectors(요소 간의 관계를 기준으로 선택)
3. Pseudo-class Selectors(요소의 특정 상태를 기준으로 선택)
4. Pseudo-elements Selectors(요소의 특정 부분을 선택)
5. Attribute Selectors(요소가 가진 속성이나 속성의 값으로 선택)

이번 글에서는 Pseudo-class Selectors에 대해서 알아보겠습니다.

Pseudo-class Selectors(요소의 특정 상태를 기준으로 선택)

가상 선택자는 요소에 마우스를 올렸을때, 링크를 클릭했을 때 등 요소가 특정 상황에 놓였을때 요소를 선택할 수 있는 선택자이다. 

표기법 - 기준 요소 뒤에 콜론( ' : ' )과 함께 기입 ex. a:link {}

가상 선택자 중 많이 쓰이는 선택자들을 알아보겠습니다.

 

1) 링크와 관련된 가상 선택자 ( link ,visited)

/* 방문하지 않은 링크 선택 */
a:link {
    color : red;
}

/* 방문한 링크 선택 */
a:visited {
    color : red;
}

 

2) 마우스 이벤트와 관련된 가상 선택자( hover, actived) 

/* 요소에 마우스를 올렸을 때 */
a:hover {
    color : red;
}

/* 요소를 클릭했을 때 */
a:actived {
    color : red;
}

+

:hover은 만약 CSS파일에서 :link와 :visited와 같이 쓰는 경우 :link와 :visited 뒤에 와야 효과를 줄 수 있다.

 

:actived는 :hover 뒤에 와야 효과를 줄 수 있다.

 

참고 - "Learn CSS" W3School (https://www.w3schools.com)