동적가상클래스 선택자

수도클래스 셀렉터들 중에서도 html 요소의 상태에 따라 스타일링을 변경할 수 있는 선택자를 동적가상클래스 선택자라고 합니다. html의 상태가 변경된다는 이야기는 html의 요소는 하나인데 사용자의 동작에 따라서 그 html의 스타일을 변경할 수 있다는 것입니다. 예를 들어 마우스를 올린다던지 , 커서를 포커싱한다던지 등 유저의 동작에 따라 상태가 바뀌면 스타일이 변경되는 것입니다.

자바스크립트를 이용해 동적인 상황에 따른 이벤트를 붙일 수도 있지만 단순히 CSS스타일링을 변경하고자 할 때는 별도의 자바스크립트 없이 CSS만으로도 충분히 상태에 따른 스타일링을 부여할 수 있습니다.

1. :link, :visited

link와 visited 의 경우 하이퍼텍스트에 적용할 수 있는 두가지 상태입니다.

하나의 Anchor요소를 통해 코드를 작성하게 되면 별도의 스타일링을 하지 않아도 브라우저에 의해서 파란색글씨의 밑줄의 스타일이 들어가게 됩니다. 또한 한번이라도 방문을 한 경우 보라색으로 나타나게 됩니다.

이런 경우 link와 visited을 이용해 링크 경로에 방문을 한적이 있는지 없는지에 따라 나누어서 스타일링을 할 수 있습니다.

2. :hover, :active, :focus

hover, active, focus는 유저가 무언가 마우스를 올리거나 클릭할 것 같은 대상들에 스타일링을 적용을 할 수 있습니다. (링크, 버튼, 메뉴, 인풋박스 등등).

2-1 hover

:사용자의 마우스 커서가 링크 위에 올라가 있는 상태에 스타일링을 지정할 수 있습니다.

2-2 active

: 사용자가 마우스로 링크를 클릭하고 있는 상태에 스타일링을 지정할 수 있습니다. 단, active가상클래스의 경우 link, hover, visited가 뒤에 명시가 되는 경우 덮어쓸 수 있기 때문에 사용시 순서에 주의해야합니다.( LVHA순서: link-vistied-hover-active )

2-3 focus

: 키보드나 마우스의 이벤트(event) 또는 Tab키 등 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태입니다.

3. enabled, disabled, checked

보통 input요소에 많이 사용이 됩니다.

3-1 disabled

: input 요소 중에서 사용할 수 없는 비활성화된 상태의 요소를 선택합니다.

<button>button</button>
<button disabled>button</button>

button:not(:disabled):hover {
  background-color: red;
}

버튼이 disabled속성을 가지고 있지 않은 경우 hover되면 배경색이 빨강색이 됩니다.

3-2 enabled

: disabled가 아닌 상태 활성화 된 상태의 요소를 선택합니다

3-3checked

: input 요소 중에서 체크된(checked) 상태의 input 요소를 선택합니다.

<input type="checkbox" id="chk1">
<label for="chk1">체크</label>

input[type="checkbox"]:checked + label {
  color:blue;
}

체크박스에 체크가 되는 경우 글씨 색상을 파란색으로 변경합니다.