[CSS] 가상 클래스 선택자, 가상 요소 선택자

css에는 가상 클래스 선택자(pseudo-class), 가상 요소 선택자라(pseudo-element)는 것이 있다.

특정한 상황에서 표현하기 위한 효과를 구현할 때 사용한다.

가상 클래스 선택자에는 link, visited, active, hover, focus, nth-child가 있다.

 

가상 클래스 선택자

가상 클래스 선택자는 : 으로 나타낸다.

선택자:가상선택자{ property : value;}

link, visited

link와 visited는 앵커(a 태그)에 사용되는 가상 선택자이다.

• link : 아직 방문하지 않은 링크
• visited : 방문한 링크

 

active, hover

active, hover, focus는 마우스의 위치와 상황에 따라 사용되는 가상 선택자이다.

• active : 마우스로 클릭한 상태
• hover : 마우스를 해당 요소에 올려둔 상태

 

focus

focus는 해당 요소에 포커스가 맞춰진 상황에 사용되는 가상 선택자이다. (예를 들어 input태그에 입력을 시도하는 경우)

 

first-child, last-child, nth-child(n)

first-child, last-child, nth-child(n)는 조건에 해당하는 요소 중 순서에 따라 CSS를 적용시키는 가상 선택자이다.

• first-child : 해당 요소 중 첫번째 요소에 CSS를 적용한다.
• last-child : 해당 요소 중 마지막 요소에 CSS를 적용한다.
• nth-child(n) : 해당 요소 중 n번째 요소에 CSS를 적용한다.

 

가상 요소 선택자

가상 요소는 실재로 존재하지 않는(HTML에 존재하지 않는) 요소를 생성할 때 사용한다.

::을 이용해 나타낸다.

선택자::가상요소{ property : value;}

 

first-line

first-line은 해당 요소의 텍스트의 첫번째 줄에만 CSS를 적용한다.

 

first-letter

first-letter는 해당 요소의 첫 문자에만 CSS를 적용한다.

 

before, after

before와 after는 단지 꾸미기를 위해 요소를 추가해야할 때 사용하는 선택자이다.

• before : 해당 태그의 앞에 놓여진다.
• after : 해당 태그의 뒤에 놓여진다.

* context : 가상 선택자에 필수로 들어가는 속성

 

---

thrillfighter.tistory.com/463

green-webdesigner.tistory.com/20