[CSS] 의사 선택자 - link, visited, target, enabled, disabled, not, active, hover, focus
안녕하세요. 명월입니다.
이 글은 CSS에서의 의사 선택자(link, visited, target, enabled, disabled, not, active, hover, focus)에 대한 글입니다.
의사 선택자는 유저의 action과 관계가 있는 선택자입니다. 예를 들면, link의 선택자는 a태그에서 한번도 클릭한 적이 없는 선택이고 visited의 경우는 선택을 클릭한 적이 있는 선택자입니다.
즉, 같은 a태그의 style이라도 유저의 선택한 경험에 의해 적용되는 선택자입니다.
또 hover의 경우는 마우스가 해당 요소 위에 있는 지 없는 지에 따른 style선택입니다.
<!DOCTYPE html>
<html>
<head><title>css</title></head>
<body>
<!-- 첫번째 요소 -->
<a href="#one">명월일지1</a><br />
<!-- 두번째 요소 -->
<a href="#two">명월일지2</a><br />
<!-- 세번째 요소 -->
<a href="#three">명월일지3</a><br />
<!-- 네번째 요소 -->
<div id="one">명월일지1</div><br />
<!-- 다섯번째 요소 -->
<div id="two">명월일지2</div><br />
<!-- 여섯번째 요소 -->
<div id="three">명월일지3</div><br />
<!-- 일곱번째 요소 -->
<input type="text"><br />
<!-- 여덟번째 요소 -->
<input type="text" disabled="disabled"><br />
<!-- 아홉번째 요소 -->
<input type="checkbox" checked="checked"><br />
<!-- 열번째 요소 -->
<input type="text" value="hover"><br />
<!-- 열한번째 요소 -->
<input type="text" value="focus"><br />
</body>
</html>
/* a 태그 중에 방문한 적이 없는 태그*/
a:link {
color:red;
}
/* a 태그 중에 방문한 적이 있는 태그*/
a:visited {
color:pink;
}
/* 클릭으로 지정된 요소 */
:target {
color:blue;
background-color:red;
}
/* input 태그 중에 활성화 되어 있는 요소, 위에서 여덟번째는 disabled 되어 있기 때문에 일곱, 아홉, 열, 열한번째 요소가 대상이 됩니다. */
input:enabled {
background-color:blue;
}
/* input 태그 중에 비활성화 되어 있는 요소, 위에서 여덟번째 요소입니다. */
input:disabled {
background-color:red;
}
/* input 태그 중에서 마우스가 위에 있는 요소입니다. */
input:hover {
color:white;
}
/* input 태그 중에서 선택되어진, 즉 커서가 움직이고 있는 요소입니다. */
input:focus {
color:aqua;
}
/* input 태그 중에서 type이 checkbox가 아닌 선택 요소입니다.*/
input:not([type=checkbox]){
border: 2px dotted orange;
margin: 10px 0px;
}
먼저 저의 액션은 첫번째 a 태그를 클릭했습니다. (id를 통한 위치 태그이기 때문에 주소줄에 #표시가 나옵니다.)
그리고 열한번째 요소를 클릭해서 입력 커서를 두고 열번쨰 요소위에 마우스를 두었습니다.
결과는 첫번째 요소는 제가 클릭을 했기 때문에 글자 색이 핑크로 변헀습니다. 나머지 a태그는 글자색이 아직 빨간색입니다. 그리고 주소 줄에 #one으로 네번째 요소가 타겟팅 되었습니다. 그래서 네번째 요소가 빨간색 바탕에 파란색 글자로 변했습니다.
(a태그와 target태그로 메뉴에서 collapse(열고 닫는 액션)을 구현할 수 있습니다.)
다섯번째는 의사 선택자라고 하기에는 속성 태그(input[disabled])와 동작이 같습니다. 근데 구분에 의사 선택자라고 하는 군요.
enabled은 disabled 속성이 없는 input 태그, disabled는 disabled 속성이 있는 태그를 선택하게 됩니다.
제가 스크린 샷을 찍을 때, 마우스를 열번째 텍스트 박스 위에 두었습니다. 그 결과, 텍스트 색이 흰색으로 나오는 것입니다.
현재 커서가 열한번째 요소에 있습니다. focus되어 있는 태그로 색이 아쿠아색으로 변했습니다.
마직막 not은 부정의 뜻입니다. input:not(속성 태그)으로 표현하면 input 태그 중에서 type이 checkbox가 아닌 요소로 선택되어집니다.
여기까지 CSS에서의 의사 선택자(link, visited, target, enabled, disabled, not, active, hover, focus)에 관한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.