CSS

[CSS] 가상선택자 :(pseudo-class), ::(pseudo-element)

FRDYtheme 2022. 10. 11. 11:37

::selection

 

가상선택자 :(의사 클래스 / pseudo-class)

CSS에서 의사 클래스는 선택하고자 하는 HTML 요소, 아이디, 클래스 선택자에게

특별한 상태를 명시할 때 사용한다.

/* 요소:의사클래스 {
	속성 : 값 }
*/

<p>의사클래스</p>

p:hover {
  color:#fff; }

동적 의사 클래스

  • :hover - 마우스를 위에 올렸을 때
  • :link - 링크 상태일 때 (기본값)
  • :visited - 방문한 적이 있을 때
  • :active - 마우스로 클릭했을 때
  • :focus - tap키로 focus가 맞춰진 상태일 때

:가상선택자도 작성 순서에 따른 우선 순위를 가지기 때문에 디자인하고자 하는 바에 따라 체크해야 함.

상태 의사 클래스

  • :checked : input의 checkbox나 raidobutton이 체크된 상태
  • :enabled : input의 "type=text", select, option에서 사용자가 선택한 상태
  • :disabled : input의 "type=text", select, option을 사용자가 선택할 수 없도록 만든 상태

구조 의사 클래스

  • :first-child : 모든 자식 요소 중에서 첫 번째에 위치하는 자식을 선택
  • :nth-child(n) : 모든 자식 요소 중에서 n번째에 위치하는 자식을 선택
  • :last-child : 모든 자식 요소 중에서 마지막에 위치하는 자식을 선택
  • :first-of-type : 모든 자식 요소 중에서 첫 번째에 등장하는 특정 요소를 선택
  • :nth-of-type(n) : 모든 자식 요소 중에서 n번째로 등장하는 특정 요소를 선택
  • :last-of-type : 모든 자식 요소 중에서 마지막으로 등장하는 특정 요소를 선택