[CSS] 가상 선택자 (hover, active, focus)

가상 클래스(:pseudo-class)

화면의 특정 요소에 커서가 향했을 때 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀주는 역할

가상 요소(:pseudo-element)

실제로 존재하지 않는 요소를 만들어 주는 역할

 

가상 클래스 종류

:hover 

마우스가 해당 요소 위에 있을 때 요소의 스타일 변경

<a href="#">이 링크를 가리켜보세요.</a>

a:hover {
  background-color: gold;
}

 

 

:active

 

마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경

<a href="#">이 링크는 클릭하는 동안 색이 빨갛게 됩니다.</a>

a:active { color: red; }

 

:focus

해당 요소에 포커스되면 요소의 스타일 변경(마우스, 키보드 해당)

<input class="blue-input" value="저는 포커스를 받으면 파랗게 됩니다.">

.blue-input:focus {
  background: yellow;
  color: blue;
}

 

가상 클래스 별 주요 특징

:hover

특정 태그 요소 hover 시 다른 태그 요소 CSS 꾸미기 적용 방법

<div id="a">
  <div id="b"> </div>
</div>

 

 

만약 요소 a 가 b 안 바로 다음에 있을 때

#a:hover > #b { 
background-color: red; 
}
//a 라는 아이디를 가진 요소에 마우스를 호버시키면 b 에 적용된 CSS가 실행된다.

 

만약 a 가 b  밖에 있을 때

#a:hover + #b{ 
background-color: red; 
}

 

만약 a 가 b  안의 어딘가 있을 때

#a:hover  #b{ 
background-color: red; 
} 
//hover  # 사이에 공란, 즉 스페이스로 칸을 비운댜.

 

만약 a 가 b의 자식일 때

#a:hover ~ #b { 
background-color: red; 
}

 

:focus

포커스를 받았거나 내부 자손 요소에 포커스 된 경우까지 스타일을 적용하고 싶을 때

:focus-within 을 사용한다. 

<div class="tparent">
  HELLO
  <input type="text" />
</div>

.parent:focus-within {
  background: green;
}