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}}
    -
tag
제목 작성자 날짜
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
#기본형
공대여자
유용한 리눅스(LINUX) 명령어
#linux #command
공대여자
[공지] 기술 게시판
#etc #공지
mins01
css offset 2
#css #offset
공대여자
css 네이밍 container vs wrapper
#css #container #wrapper
공대여자
css aspect-ratio 1
#aspect-ratio #css
공대여자
preserve-3d multi-layers 1
#css #preserve-3d
공대여자
css transition vs animation
#css #transition #animation
공대여자
css effect - grid 1
#css #effect #grid
공대여자
cubic-bezier 1
#css
공대여자
style font-weight class-name 1
#css #style #font-weight
공대여자
scroll-snap-type 3
#css #scroll-snap-type
공대여자
css min(),max(),clamp() 3
#css #min #max #clamp
공대여자
CSS : appearance 3
#css #appearance #custom
공대여자
repeating-linear-gradient 크롬 모바일 버그 chrome mobile bug
#repeating-linear-gradient #chrome #bug #css
공대여자
ui_treeList 2
#css #treelist
공대여자
treeList , li 를 사용한 tree 목록 1
#css #style #tree
공대여자
vertical-align test 1
#css #vertical-align
공대여자
tag