::selection
웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을
바뀝니다. 이 색은 CSS로 바꿀 수 있습니다.사용하는 선택자는 가상 요소
::selection입니다.
예제 1
다음은 텍스트를 선택했을 때 배경은 검은색으로, 글자는 노란색으로 만드는 예제입니다.
<h1>Lorem ipsum dolor sit</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
::selection {
background-color: black;
color: yellow;
}
예제 2
요소별로 다르게 설정할 수도 있습니다. 다음은
<h1> 요소에 대해서는 선택했을 때 배경은 오렌지색, 글자는
검은색으로 만드는 예제입니다.
h1::selection {
background-color: orange;
color: black;
}
예제 3
text-shadow 속성을 이용하면 그림자 효과를 줄 수 있습니다. 다음은 선택했을 때 그림자가 파란색과 핑크색으로 변하는 예제입니다. 두 번 클릭 시 그림자가 변합니다.
<h1>::selection</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
::selection {
text-shadow: 2px 2px 4px #6495ED;
}
.lb ::selection {
text-shadow: 2px 2px 4px #FFC0CB;
}
document.addEventListener("DOMContentLoaded", ev => {
document.body.addEventListener("dblclick", ev => {
document.body.classList.toggle("lb");
});
});