pseudo class 1

목차

• link
• visited
• hover
• active
• checked
• focus
• target

---

 link

아직 방문하지 않은 요소에만 스타일을 적용

.test:link {
    color: aqua;
}

<a href="https://www.naver.com" class="test">Naver</a>

---

 

 visted

방문 한 적이 있는 요소에만 스타일을 적용

.test:visited {
    color: yellowgreen;
}

<a href="https://www.naver.com" class="test">Naver</a>

---

 

 hover

마우스 포인터를 요소위에 올렸을때 스타일을 적용

마우스 오버 전

메뉴1에 마우스 오버

li a{
    text-decoration: none;
    color: white;
}
li a:hover {
    color: black;
}

    <ul>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
        <li><a href="#">메뉴3</a></li>
        <li><a href="#">메뉴4</a></li>
        <li><a href="#">메뉴5</a></li>
    </ul>

---

 

 active

활성화(클릭중)한 요소에 스타일을 적용

a:active {
    background-color: aqua;
}

<a href="https://www.naver.com" class="test">Naver</a>

 checked

선택한 항목에 스타일을 적용

input:checked + label {
    color: red;
}

<span>성별</span>
<input type="radio" id="man" name="mow" value="1">
<label for="man">남자</label>
<input type="radio" id="woman" name="mow" value="2">
<label for="woman">여자</label>

 focus

포커스를 받은 요소에 스타일을 적용

포커스를 받기 전

포커스를 받음

input:focus {
    outline: none;
    border: 1px solid purple;
}

<label for="input_1">이름</label>
<input type="text" id="input_1">

 target

앵커 대상에 스타일을 적용

메뉴1을 클릭하면 target 테스트 항목으로 이동하게 링크를 걸어두었을때, 이동하기 전

메뉴1을 클릭해 이동한 후

#target_1:target {
    background-color: burlywood;
}

<li><a href="#target_1">메뉴1</a></li>

<span id="target_1">target 테스트</span>

---

 

Github

Link