CSS Pseudo-classes , Pseudo-elements, 가상 클래스, 가상 엘레멘트

1 minute read

Pseudo-classes

  • XXXXX:hover 같은 것으로 : 하나로 시작한다.
  • 보통 대상에 대한 이벤트나 순서나 위치에 대한 CSS를 재정의 할 때 사용한다.

주요 클래스

  • a 태그(링크) 관련
  • 예전부터 사용되어 왔다.(IE7 부터)
  • 작성시 순서에 주의해야한다. 안그러면 hover 같은건 동작 안할 수도 있다.
    a:link , a:visited, a:hover , a:active
    순서로 css를 작성하자.

  • a:active 
  • 링크를 클릭하였을 때

  • a:hover
  • 링크에 마우스를 올릴 때
  • 요즘엔 a태그 외의 다른 태그에서도 사용 가능하다.

  • a:link
  • 링크 되었을 때 (href가 있어야한다)

  • a:visited
  • 링크를 방문 하였을 때

  • input 관련
  • 대부분 input의 attribute나 상태에 따라서 동작한다..

  • input:checked
  • checked 애트리뷰트가 설정되어있다면
  • 반대 가상 클래스가 없다!!

  • input:disabled
  • disabled 애트리뷰트가 설정되어있다면

  • input:enabled
  • input:disabled 의 반대

  • input:focus
  • 해당 태그에 포커스가 있다면
  • input 말고도 사용될 수 있다.

  • input:in-range
  • input의 type=number에서 min과 max 사이에 값이 있다면
  • min이나 max 둘 중 하나는 설정이 되어있어야한다.

  • input:out-of-range
  • input:in-range 의 반대

  • input:valid
  • input의 value가 type의 형식이나 pattern 에 맞을 경우
  • 형식이 있는 type이거나 pattern 애트리뷰트가 설정되어 있어야한다.

  • input:invalid
  • input:valid 의 반대

  • input:required
  • required 애트리뷰트가 설정되어있다면

  • input:optional
  • input:required 의 반대

  • input:read-only
  • readonly 애트리뷰트가 설정되어있다면

  • input:read-write
  • input:read-only 의 반대
  • :disabled와 따로 동작한다.

  • 일반
  • 위치 등에 관련된 것 등
  • selectors:empty
  • 해당 요소 속이 비어있는 경우(tag가 textnode 등이 없어야한다. 심지어 빈칸도)

  • selectors:nth-child(n)
  • 부모 기준으로 n번째 자식 요소가 셀랙터와 같으면
  • n 형식
  • 숫자 
  • n번째를 의미 (반본 안 함)

  • an+b => 3n+1
  • 반복 규칙, 1,4,7.. 번째 마다(반복함)

  • odd , even 
  • 홀수번째, 짝수번째 마다(반복함)
  • 2n+1 , 2n+0 과 같음

  • selectors:nth-last-child(n)
  • selectors:nth-child(n)의 반대
  • 즉, 뒤에서 n번째

  • selectors:first-child
  • selectors:nth-child(1) 과 같다.

  • selectors:last-child
  • selectors:first-child의 반대

  • selectors:only-child
  • 부모 안에 해당 셀랙터의 요소가 1개만 있는 경우. 다른 자식 요소도 체크한다.

  • selectors:nth-of-type(n)
  • 부모 기준으로 셀랙터와 같은 자식 요소중 n번째 자식 요소

  • selectors:nth-last-of-type(n)
  • selectors:nth-of-type(n) 의 반대
  • 즉, 뒤에서 n번째

  • selectors:first-of-type
  • selectors:nth-of-type(1) 과 같다

  • selectors:last-of-type
  • selectors:first-of-type 의 반대

  • selectors:only-of-type
  • 부모 안에 해당 셀랙터의 요소가 1개만 있는 경우. 셀랙터의 요소 외 것은 체크하지 않는다.

  • selectors:lang(language)
  • lang 애트리뷰트의 값이 같은 경우
  • 앞의 2글자만 체크한다.

  • selectors:not(not_selectors)
  • 셀랙터 요소 중 not_selectors 조건이 아닌 것

  • #ID:target
  • URL중 #name 부분이 #ID와 같은 경우
  • 북마크 이동에 대한

  • :root
  • css용 전역 변수 선언을 해 놓을 수 있다.
  • 링크(한글)
  • IE11 지원 안됨, IE 엣지부터 지원
  • :root {  –bg-color: brown; }
    .xx{ background-color: var(–bg-color); }
  • var ( –key1 , var ( –key2 , black))
  • –key1 가 있으면 –key1 를 사용 없으면, –key2 를 체크해서 있으면 –key2를 사용, 없으면 black을 사용
  • if esle 처럼 동작시킬 수 있다.

Pseudo-elements

  • XXXXX::before 와 같은 모양으로 :: 두개로 시작한다. (IE 호환 때문에 : 하나로 시작하는 경우도 있음)
  • 설정하면 해당 엘레멘트가 생기거나 엘레멘트로 바뀐다.

계속 작성중.



🔗original-link

Updated: