CSS-선택자(selector)3 : 가상클래스/UI 요소 상태 선택자

1. 가상클래스 선택자(Pseudo-Class Selector) : 요소의 특정 상태에 따라 스타일을 정의

- 링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes)

속성 값	설명
a:link	사용자가 방문하지 않은 링크일 경우
a:visited	사용자가 해당 링크를 방문하고 돌아왔을 경우
a:hover	링크 문자에 마우스가 닿았을 경우
a:active	링크 문자가 클릭된 상태일 경우 (활성화)
a:focus	링크 걸린 글자에 포커스가 생길 경우

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>가상클래스 셀렉터</title>
    <style>
        ul{list-style: none; }
        a{text-decoration: none}
        a:link{color: orange} /* a 요소가 방문하지 않은 링크일 때 */
        a:visited{color:darkgreen} /* a 요소가 방문한 링크일 때 */
        a:hover{font-size: 25px} /* a 요소에 마우스가 올라와 있을 때 */
        a:active{font-size: 25px; color:red} /* a 요소가 클릭된 상태일 때 */
        input:focus{background-color: lightyellow} /* input 요소에 포커스가 들어와 있을 때 */
    </style>
</head>
<body>
    <ul>
        <li><a href="#">This is a link</a></li>
        <li><a href="#">This is a link</a></li>
        <li><input type="text" placeholder="focus me"></li>
    </ul>
</body>
</html>

가상클래스 셀렉터

2. UI 요소 상태 선택자(UI element states pseudo-classes)

속성 값	설명
:checked	셀렉터가 체크된 상태일 때
:enabled	셀렉터가 사용 가능한 상태일 때
:disabled	셀렉터가 사용 불가능한 상태일 때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UI 요소 상태 셀렉터</title>
    <style>
        input:enabled+span{color: blue} /*선택 가능한 상태*/
        input:disabled+span{color: gray; text-decoration: line-through;} /*선택 불가능한 상태. line-through=취소선*/
        input:checked+span{color: red} /*체크 된 상태*/
    </style>
</head>
<body>
    <input type="radio" name="rdo" value="male" checked><span>male</span><br>
    <input type="radio" name="rdo" value="female"><span>female</span><br>
    <input type="radio" name="rdo" value="neuter" disabled><span>neuter</span>
    <hr>
    <input type="checkbox" value="bicycle" checked><span>bicycle</span><br>
    <input type="checkbox" value="car"><span>car</span><br>
    <input type="checkbox" value="motocycle" disabled><span>motocycle</span>
</body>
</html>

UI 요소 상태 셀렉터

저작자표시

'CSS' 카테고리의 다른 글

CSS-Font & Text (0)	2020.08.10
CSS-선택자(selector)4 : 가상요소 선택자 (0)	2020.08.08
CSS-선택자(selector)2 : 속성선택자 (0)	2020.08.07
CSS-선택자(selector) (0)	2020.08.06
CSS란? (0)	2020.08.06