8-3. CSS 가상 클래스와 가상 요소

1. 사용자 동작에 따라 반응하는 가상 클래스 

사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상클래스 선택자를 사용한다. 

 

1️⃣ : link 가상 클래스 선택자 

방문하지 않은 링크에 스타일을 적용한다. 

 

2️⃣ : visited 가상 클래스 선택자 

방문한 링크에 스타일을 적용한다. 

 

3️⃣ : hover 가상 클래스 선택자 

특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용한다. 

 

4️⃣ : active 가상 클래스 선택자

웹 요소를 활성화했을 때 스타일을 적용한다. 

 

5️⃣ : focus 가상 클래스 선택자 

웹 요소에 초점이 맞춰졌을 때 스타일을 적용한다. 

 

 

 

2. 요소 상태에 따른 가상 클래스 

 

1️⃣ : target 가상 클래스 선택자 

다른 사이트의 페이지로 이동할 때에는 링크를 이용하고, 같은 문서 안에서 다른 위치로 이동할 때에는 앵커를 이용한다. 이때 :target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있다. 

2️⃣ :enabled 와 :disabled 가상 클래스 선택자 

해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용하고, 

사용할 수 없는 상태일 때 스타일을 지정하려면 :disabled 선택자를 이용한다. 

 

3️⃣ :checked 가상 클래스 선택자 

checked 속성이 있는 요소의 스타일 지정할 때 사용 

 

4️⃣ : not 가상 클래스 선택자 

not 은 괄호안에 있는 요소를 제외한다. 

radio 요소 제외 

 

 

3. 구조 가상 클래스 

구조 가상 클래스란 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자이다. 

 

1️⃣ 특정 위치의 자식 요소 선택하기 

:only-child  

부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다. 

A:only-type-of

부모 안에 A 요소가 하나뿐일 때 선택한다. 

:first-child

부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다. 

:last-child

부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다. 

A:first-of-type

부모 안에 있는 A 요소 중에서 첫번째 요소를 선택한다.

A:last-of-type

부모 안에 있는 A 요소 중에서 마지막 요소를 선택한다. 

:nth-child(n)

부모 안에 있는 모든 요소 중에서 n 번째 자식 요소를 선택한다. 

:nth-last-child(n)

부모 안에 있는 모든 요소 중에서 끝번째 자식 요소를 선택한다. 

A:nth-of-type(n)

부모 안에 있는 A 요소 중에서 n 번째 요소를 선택한다. 

A:nth-last-of-type(n)

보모 안에 있는 A 요소 중에서 끝에서 n 번째 요소를 선택한다. 

 

2️⃣ 수식을 사용해 위치 지정하기 

홀수 번째에 스타일을 줄 때는 nth-child(odd), 짝수 번째에 스타일을 줄 때는 nth-child(even)을 사용할 수 있다. 

 

 

 

4. 가상 요소 

가상 클래스가 웹 문서의 여러 요소 중에서 원하는 요소를 선택한다면,

가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다. 

 

1️⃣ ::first-line 요소, ::first-letter 요소 

지정한 요소의 첫 번째 줄이나 첫번째 글자에 스타일을 적용할 수 있다. 

 

2️⃣ ::before 요소, ::after 요소 

지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있다.