CSS - 가상 요소

1. 가상 요소

가상 요소는 선택자에 추가하는 가상 요소로, 선택한 요소의 일부분에만 CSS를 적용
할 수 있습니다.

🔔 두 개의 세미콜론 ::

가상 클래스와는 다르게 가상 요소는 세미콜론을 2개 사용해야 적용 됩니다.
(일부 브라우저는 제외, 크롬에선 1개를 사용해도 동작함)

1.1 first-letter

요소 중에서 첫 번째 글자만 선택하는 가상 클래스 입니다.

/* h2 문서에서 첫 번째 글자만 css가 적용 됩니다. */
h2::first-letter {
    font-size: 40px;
    color: black;
}

1.2 first-line

요소 중에서 첫 번째 줄만 선택하는 가상 클래스입니다.

/* p 문서에서 첫 번째 문단의 라인만 css가 적용 됩니다 */
p::first-line {
	color: green;
}

1.3 selection

요소 중에서 강조표시한 부분에 적용되는 가상 클래스입니다.
요소를 드래그할 시, 이벤트가 적용 됩니다.

/* p 요소 전체에 강조 색상을 변경 합니다 */
p::selection {
    background-color: yellow;
}