의사 클래스(가상 클래스)는 CSS를 적용할 때 클래스 선택자나 태그 선택자에 추가해 선택한 요소가 특별한 상태일 때의 스타일을 적용하는 방식입니다. 클래스나 태그로 선택자를 선택하고 스타일을 적용할 때는 DOM에 이미 정의된 요소로 선택하지만 의사 클래스를 사용하면 DOM에 없는 정보를 사용해 요소를 선택할 수 있습니다.
의사 클래스는 다양한 상황에서 적용할 수 있는데, 요소의 히스토리를 구분하는 visited, 콘텐츠의 상태를 구분하는 checked, 요소의 자식 요소를 선택하는 nth-child() 외에도 사용자의 동작에 따라 :hover, :active, :focus처럼 상호작용하는 스타일을 적용할 수도 있습니다.
:hover
:hover는 마우스가 요소 위에 진입했을 때 적용되는 의사 클래스입니다. 아래 코드는 select 요소에 마우스가 진입했을 때 배경색이 빨갛게 변했다가 마우스가 요소를 빠져나왔을 때 배경색이 기존 색상대로 변경됩니다.
button:hover {
background-color: red;
}:focus
:focus는 요소가 포커싱된 상태 즉, 버튼을 클릭하거나 인풋창을 선택한 상태일 때 적용되는 의사 클래스입니다. 아래 코드는 select 요소를 클릭했을 때 배경색이 노란색으로 변경되었다가 다른 요소를 클릭해 포커싱이 빠지는 경우 배경색이 기존 색상대로 변경됩니다.
button:focus {
background-color: yellow;
}의사 클래스 중첩하기
그렇다면 이 가상 클래스를 중첩해서 사용하면 어떻게 적용될까요?
의사 클래스는 상호배타적이지 않기 때문에 여러 개의 가상 클래스를 적용하면 해당 클래스들은 유효하게 적용됩니다. 그런데 CSS는 Cascading 되는 속성을 갖고 있으므로 의사 클래스를 적용할 때도 이러한 특징이 그대로 전달됩니다. 즉, :hover와 :focus는 어떤 순서로 작성되느냐에 따라 화면에 나타나는 현상이 달라질 수 있습니다.
button:focus {
background-color: yellow;
}
button:hover {
background-color: red;
}
만약 요소 위에 마우스가 진입했을 때 적용되는 :hover와 요소가 포커스되었을 때 적용되는 :focus를 함께 적용하면서 요소가 클릭되는 순간 :focus가 적용되는 버튼을 만들기 위해 위와 같은 코드를 작성했다고 생각해봅시다.
생성된 버튼을 클릭해보면 버튼에 마우스 오버가 되었을 때 빨간색으로 변하고, 클릭 후 요소 위에서 마우스가 빠진 후에 :focus가 적용되어 노란색으로 변경되는 것처럼 보입니다. :focus가 요소에 포커싱이 되었을 때 적용되는 코드라는 것을 안다면 이 동작이 부자연스럽게 느껴집니다. 요소에 클릭하는 순간 포커싱이 되는 것인데 여전히 스타일은 :hover에 작성한 빨간색이 적용되었기 때문입니다.
이는 CSS의 특징인 Cascading이 적용되었기 때문입니다. 즉, :hover가 :focus보다 이후에 작성되었기 때문에 요소는 :hover의 영향을 가장 크게 받습니다.
만약 요소를 클릭하는 순간 :focus 클래스에 작성한 노란색이 적용되도록 하려면 다음과 같이 코드를 작성해주어야 합니다.
button:hover {
background-color: red;
}
button:focus {
background-color: yellow;
}
마무리
CSS를 작성할 때 우선 순위가 존재한다는 것을 모르는 경우는 거의 없을 것입니다. 그러나 최근에는 css-in-js를 사용하는 경우가 많기 때문에 의사 클래스가 아닌 요소에 적용된 CSS에 우선 순위가 있다는 것을 체감하는 일은 생각보다 많지 않습니다. 또, 의사 클래스를 연달아 적용해서 사용하는 경우가 많지 않다보니 의사 클래스도 Cascading 된다는 것을 연상하기 쉽지 않았습니다.
최근에 범용적으로 사용하기 위한 스타일 컴포넌트를 만들면서 의사 클래스도 Cascading 된다는 특성을 다시 한 번 확인할 수 있었습니다.
