가상 클래스

앵커 가상 클래스

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

앵커 가상 클래스에서 가장 자주 쓰이는 패턴이다. :link는 아직 방문하지 않은 링크를 나타낸다. 다음을 사용해서 아직 방문하지 않은 링크를 파란색으로, 방문한 링크는 밑줄 없이 보라색으로 표현할 수 있다.

 

 

    a:link {
        color: blue;
    }
    a:visited {
        color:purple;
        text-decoration: none;
    }

몇가지 앵커 가상 클래스는 사용자의 행동에 영향을 받는다.

    a:hover {
        color: red;
    }
    a:active {
        color: gray;
    }
    a:focus {
        color: yellow;
    }

 

 

• :hover : 사용자가 해당 요소에 커서를 가져다 댔을 때
• :active : 요소가 활성화 되었거나 클릭 되었을 때
• :focus : 해당 요소에 키보드 포커스가 맞춰졌을 때

 

순서에 따른 가상 클래스

가상 클래스의 장점 중 하나는 오직 CSS를 주기 위해 클래스를 추가할 필요가 없다는 것이다.

 

 

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

    ol li:first-child {
        border-top: none;
    }

    ol li:last-child {
        border-top: none;
    }

    ol li:nth-child(2) {
        border-top: none;
    }