css 가상 선택자

가상 선택자

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

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

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

다른예시 및 사용법

의사 요소(가상 요소)

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

다른예시 및 사용법

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

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

좋은 웹페이지 즐겨찾기