css 가상 선택자
가상 선택자
- 가상 선택자란 말은 없지만 의사 요소(가상 엘리먼트) 와 의사 클래스(가상 클래스)를 합쳐서 얘기한다.
의사 클래스(가상 클래스)
- :로 시작하며 선택자에 추가하는 요소로 선택한 요소가 특별한 상태여야 만족할 수 있습니다.
- 의사 클래스를 사용하면 DOM뿐만 아니라 히스토리, 콘텐츠의 상태, 마우스의 위치 등 외부 인자와 관련된 경우에도 스타일을 적용 할 수 있다.
- ex) 많이 사용하는 의사 클래스 버튼이나 a태그에 마우스가 위치하면 색이 변경 된다.
a:hover {
transi
color: red
}
의사 요소(가상 요소)
- ::로 시작하며 선택자에 추가하는 키워드로 선택한 요소 일 부분에만 스타일을 입힐 수 있다.
- 하나의 선택자에 하나의 의사 요소만 사용할 수 있다.
- ex) ::first-line을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있다.
p::first-line {
color: blue;
text-transform: uppercase;
}
의사 클래스(:) 와 의사 요소(::)의 차이
- 과거에는 구별을 두지 않았기 때문에 대부분의 브라우저가 :와 ::를 지원하지만 구별해야 한다.
- 보기에는 비슷해 보이지만 의사 요소는 요소의 특정 부분에 스타일을 적용 할 때 사용한다.
Author And Source
이 문제에 관하여(css 가상 선택자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hongdol/css-가상선택자저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)