CSS Pseudo-classes , Pseudo-elements, 가상 클래스, 가상 엘레멘트
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 호환 때문에 : 하나로 시작하는 경우도 있음)
- 설정하면 해당 엘레멘트가 생기거나 엘레멘트로 바뀐다.
계속 작성중.