CSS

가상 클래스 셀렉터(Pseudo-Class Selector)

행복주의자 2023. 10. 17. 17:16

 

가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다.

[ 특정 상태의 예 ]

  • 마우스가 올라와 있을 때
  • 링크를 방문했을 때와 아직 방문하지 않았을 때
  • 포커스가 들어와 있을 때

 

이러한 특정 상태에는 원래 class가 존재하지 않지만, 가상 class를 임의로 지정하여 선택하는 방법이다.

가상 클래스는 마침표(.) 대신, 콜론(:)을 사용한다.

CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.

selector:pseudo-class {
 property: value;
}

 

# 예시

다음은 a 요소가 hover 상태일 때(마우스가 올라와 있을 때-특정 상태) 글자색이 red로 변경되고, input요소가 focus 상태(특정 상태)일 때 backgroud-color가 yellow로 지정하는 예.

<!DOCTYPE html>
<html>
<head>
  <style>
  /* a 요소가 hover 상태일 때 */
   a:hover { color: red; }
  /* input 요소가 focus 상태일 때 */
   input:focus { background-color: yellow; }
  </style>
</head>
<body>
  <a href="#">Hover me</a><br><br>
  <input type="text" placeholder="focus me">
</body>
</html>

See the Pen Untitled by 오예림 Ria Oh (@riaoh) on CodePen.

 

*출처 ▼

 

CSS3 Selector | PoiemaWeb

CSS(Cascading Style Sheets)는 HTML 요소(Element)의 style(design, layout etc)을 정의한다. 그리하려면 HTML이 존재하여야 하고 또한 style을 적용하고자하는 HTML 요소를 특정할 필요가 있다. 이러한 목적으로 사용

poiemaweb.com