CSS selector 가상클래스 선택자

css에서 가장 기본이 되고 중요한 selector(선택자)

선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자

 

가상클래스 선택자

-특정 이벤트가 발생되면 이를 감지하고 선택하는 태그

이건 코드보고 이해하는게 더 빠르다

 

ex) 

html

<ul>       
        <li><a href="http://www.google.com">구글</a></li>
        <li><a href="http://www.daum.net">다음</a></li>
        <li><input type="checkbox">체크박스</li>
</ul>

css

1.
a:link{
    color: pink;
}

2.
a:visited{
    color: grey;
}

3.
a:hover{
    background-color: purple;
}

4.
input:checked{
    width: 200px;
    height: 200px;
}

해석

 

html?

링크걸린 구글 / 링크걸린 다음 / 체크박스 세가지가 리스트 되어 있음

 

css?

1. 링크 걸린 곳이 있으면(이벤트 발생하면) 링크 선택하여 글자 pink

2. 링크된 사이트 방문하고 나면(이벤트가 발생하면) 링크 선택하여 글자 grey 적용

3. 링크된 글자 위에 마우스를 올리면(이벤트 발생하면) 링크 선택하여 배경색 purple 적용

4. 체크박스가 체크되면(이벤트 발생하면) 체크박스 선택하여 너비200px, 높이200px 적용