[CSS] 링크선택자와 가상 클래스 선택자 요소와 순서 정리

 

1. 링크 선택자 사용방법 

선택자:link

:link로 링크가 걸린 요소들을 선택한다.

 

사용법) a:link(눌러보지 않은 a링크에 삽입) 

a:link {
    color: Blue;
}

<a> 태그 중 링크가 걸려있는 요소를 파란색으로 적용한다. 

 

:visited로 방문했던 링크가 걸린 요소들을 선택한다. 

a:visited {
    color: Blue;
}

<a> 태그 중 방문한 적이 있는 요소를 파란색으로 적용한다.

 

가상 클래스 선택자

 

2. 가상 클래스 선택자 (pseudo-class)

 

가상 클래스 선택자(pseudo-class)는 HTML 문서에 작성된 요소에 가상의 클래스를 생성할 수 있다. 

- 가상클래스 가상요소는 상황에 대한 스타일을 이야기하며 스타일을 잘 사용하려면 이것을 꼭 알고 가야한다! 

- 많이 쓰이는 것은 굵게 밑줄 표기해두었다. 

 

		가상 클래스 선택자(pseudo-class)
1	:active	<a>,<button>과 함께 사용하는 경우가 많다. 사용자가 활성화한 요소를 나타낸다. (마우스로 요소 클릭 시)
2	:only-child	형제가 없는 요소를 선택할 때 사용된다. :first-child:last-child 와 동일하다.
3	:hover	마우스 커서가 올라가 있을 때(마우스 오버)선택된다. :link, :visited, :active를 함께 쓴다면 css작성시 순서에 주의해야 한다.
4	:only-of-type	같은 유형의 요소 형제가 없을 때 적용된다.
5	:checked	요소를 선택했거나 radio, checkbox의 옵션에 체크한 경우 활성화된다.
6	:invalid	input이나 form 태그 등의 유효성을 검사할 때 사용된다.
7	:out-of-range	input박스에 설정한 max값을 초과하는 등 한계치를 벗어났을 때 사용된다.
8	:nth-child()	형제의 순서에 따라 요소를 선택한다. ()안에는 인덱스(1이상)외에도 odd(홀수), even(짝수)번째, An+B 등의 함수식도 적용할 수 있다.
9	focus	input 태그 등의 입력칸이 포커스되었을 때 사용된다. 포커스 받은 요소만 해당되므로 자식이 포커스를 받았을 때 사용하려면 :focus-within을 사용하면 된다.
10	:link	href 속성을 가진 태그 중, 아직 방문하지 않은 요소에 사용하면 된다. :visited, :hover, :active와 함께 사용한다면 css 작성 순서에 주의해야 한다.
11	:visited	사용자가 방문한 적있는 링크에 해당된다. :link, :hover, :active와 함께 사용한다면 css 작성 순서에 주의해야한다.

 

많은 가상클래스 요소 알아보러 가기 

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

 

3.  가상 클래스와 가상 요소의 순서 

가상 클래스와 가상 요소를 함께 사용한다면  다음 순서를 지켜주어야한다. 

가상클래스 : 가상요소

p:hover:before {
    content: "!";
    color: Blue;
}

<p> 태그 중 마우스가 올라간 요소 앞에 ! 글자를 삽입하고 스타일을 파란색으로 적용한다.

의사 클래스 - CSS: Cascading Style Sheets | MDN