logo image
메인
기술
HOME
기술

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

1
목록
#css #pseudo-classes #pseudo-elemen #가상

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 호환 때문에 : 하나로 시작하는 경우도 있음)
  • 설정하면 해당 엘레멘트가 생기거나 엘레멘트로 바뀐다.
계속 작성중.
목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
3.31
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
game_tictactoe
4.10
4.11
4.12
4.13
4.14
4.15
4.16
4.17
:scope selector , querySelector 에서 this, self node 지정
4.18
4.19
4.20
4.21
4.22
4.23
ui_treemap
4.24
4.25
4.26
4.27
4.28
4.29
4.30
5.1
5.2
5.3
5.4
tag