가상 클래스 선택자, 가상 요소 선택자

가상 클래스 선택자, 가상 요소 선택자. 둘다 가상 선택자이다.

 

결론부터 말하자면,

HTML에 이미 존재하는 요소를 선택하면 '가상 클래스' 선택자이고,

HTML에 존재하지 않지만, 가상의 요소를 생성하여 선택하는 것은 '가상 요소' 선택자 라고 할 수 있다.

 

- 가상 클래스에는 

:active

=> 사용자에 의해 활성화되어 있는 요소,

마우스를 사용한다면, 마우스 버튼을 누르고 떼는 시점까지를 의미, 보통 a,button에 자주 사용

 

주의) LVHA순서

:active 가상 클래스로 정의된 스타일은 :link,  :visited, :hover에 적용된 스타일에 재정의 된다.

링크를 적당히 디자인하고 싶으면

link, visited, hover, active 순으로 스타일을 정의해야 한다.

 

:focus

=> 요소가 현재 입력을 받도록 선택된 상태

 

??) :active, :focus 차이는 무엇인가요? 

foucs는 요소가 현재 입력을 받오록 선택된 상태

active는 요소가 현재 사용자에 의해 활성화되고 있는 상태

ex) <button> 태그를 클릭하면 :focus:active 상태임

 

: checked

=> radio 버튼 select > option가 체크되었을때의 상태

 

: default 

=> button, checkbox, radio, select >option 의 기본값에 대한 상태

 

: empty

=> 자식이 없는 모든 요소를 나타내고, 텍스트 공백도 포함한다.

 

: enabled

: 모든 활성화된 요소를 나타낸다.

 

가상 클래스의 정리는 여기까지 하고 나머지는 bearjin90.tistory.com/4 여기서 자세히 알아보자.

 

 

- 가상 요소 선택자는 

앞서 말했듯이, html 에 존재하지 않지만, 가상의 요소를 생성하여 선택하는 것이다.

게임 캐릭터로 치면 펫같은 애들이다.

::after

::before

::first-letter

::first-line

::selection

 

그 외의 차이점은 눈치챘을 수도 있겠지만, 콜론의 개수다.

근데, :after, :before, :first-letter, :first-line 처럼 가상요소 선택자도 콜론 1개로 쓸 수 있다고 한다?