CSS - 가상(의사) 클래스

1. 가상(의사) 클래스

• 선택자 뒤에 가상으로 추가하는 클래스로 선택한 요소가 특별한 상태여야 만족할 수 있다.

• 특정 위치에 있는 컨텐츠를 선택해서 사용할 수 있어 코드를 간소화 시킬 수 있습니다.

1.1 hover

hover 클래스가 적용된 요소에 마우스 커서가 올라가면 이벤트를 발생시킵니다.

/* 버튼 요소에 마우스 커서를 올려둘 시, css가 적용 됩니다. */
button:hover {
	background-color: red;
    color: white;
}

1.2 active

active 클래스가 적용된 요소는, 마우스로 요소를 누르고 있을 때 이벤트가 발생됩니다.

/* 버튼 요소를 클릭하고 있을 때, css가 적용 됩니다. */
button:active {
	backgrounc-color: yellow;
    color: black;
}

1.3 checked

checked 가상 클래스는 선택박스에서 사용되는 요소 입니다.
라디오나 선택박스에 커서로 클릭하는 경우 체크되어 이벤트가 발생합니다.

/* 사용자가 선택박스를 클릭할 시, css가 적용 됩니다. */
input[type="radio"]:checked {
	box-shadow: 0 0 0 3px red;
}

1.4 link

link 가상 클래스는, 사용자가 하이퍼링크가 연결된 요소를 클릭 한 적이 없을 때
이벤트가 발생합니다.

/* 사용자가 클릭하지 않은 a 요소에 css가 적용 됩니다. */
span a:link {
    color: red;
}

1.5 visited

visited 가상 클래스는, 사용자가 한 번이라도 링크를 클릭 했을 시 이벤트가 발생합니다.

span a:visited {
	color: blue;
}

1.6 focus

focus 가상 클래스는, 사용자가 입력요소를 활성화 하고 있는 경우 이벤트가 발생 합니다.

input[type="text"]:focus {
    color: red;
    background-color: yellow;
}

2. codepen 확인