css 가상 선택자

가상 선택자

• 가상 선택자란 말은 없지만 의사 요소(가상 엘리먼트) 와 의사 클래스(가상 클래스)를 합쳐서 얘기한다.

의사 클래스(가상 클래스)

• :로 시작하며 선택자에 추가하는 요소로 선택한 요소가 특별한 상태여야 만족할 수 있습니다.
• 의사 클래스를 사용하면 DOM뿐만 아니라 히스토리, 콘텐츠의 상태, 마우스의 위치 등 외부 인자와 관련된 경우에도 스타일을 적용 할 수 있다.
• ex) 많이 사용하는 의사 클래스 버튼이나 a태그에 마우스가 위치하면 색이 변경 된다.

a:hover {
transi
color: red
}

다른예시 및 사용법

의사 요소(가상 요소)

• ::로 시작하며 선택자에 추가하는 키워드로 선택한 요소 일 부분에만 스타일을 입힐 수 있다.
• 하나의 선택자에 하나의 의사 요소만 사용할 수 있다.
• ex) ::first-line을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있다.

p::first-line {
  color: blue;
  text-transform: uppercase;
}

다른예시 및 사용법

의사 클래스(:) 와 의사 요소(::)의 차이

• 과거에는 구별을 두지 않았기 때문에 대부분의 브라우저가 :와 ::를 지원하지만 구별해야 한다.
• 보기에는 비슷해 보이지만 의사 요소는 요소의 특정 부분에 스타일을 적용 할 때 사용한다.