CSS_03_ 가상 클래스와 가상요소

📌 1. 가상 선택자

• CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있어 html 문서에 쓸데없는 태그를 사용하여 화면 리더기 등에 쓸데없는 정보가 읽히거나 불필요한 클래스를 남발해 코드 가독성을 낮추지 않게 한다.

📌 2. 앵커 가상 클래스

• 앵커 가상 클래스는 화면의 특정 요소에 커서가 향했을 때 특정 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀준다.

    a:link {
        color: blue;
    }
    a:visited {
        color:purple;
        text-decoration: none;
    }
    a:hover {
        color: red;
    }
    a:active {
        color: gray;
    }
    a:focus {
        color: yellow;
    }

• link : 방문하지 않은 링크
• visited : 방문한 링크
• hover : 사용자가 해당 요소에 커서를 가져다 댔을 때
• active : 요소가 활성화 되었거나 클릭 되었을 때
• focus : 해당 요소에 키보드 포커스가 맞춰졌을 때

---

📌 3. 순서에 따른 가상 클래스

 	ol li:first-child {
        border-top: none;
    }
    ol li:last-child {
        border-top: none;
    }
    ol li:nth-child(2) {
        border-top: none;
    }
    ol li:nth-child(2n+1) {
        border-top: none;
    }
    ol li:nth-child(2n) {
        border-top: none;
    }

- first-child : li 중 첫번쩨 요소에 해당 CSS를 적용한다.
- last-child : li 중 마지막에 해당 CSS를 적용한다.
- nth-child(n) : li 중 n번쩨 요소에 해당 CSS를 적용한다.
- nth-child(2n+1) : li 중 홀수 요소에 해당 CSS를 적용한다.
- nth-child(2n) : li 중 짝수 요소에 해당 CSS를 적용한다.