본문 바로가기
프로그래밍/CSS

CSS 접근자

by 꾸션 2022. 6. 27.

css 접근자 정의 및 예시입니다.

 

.class .intro class="intro"인 모든 요소 선택
.class1.class2 .name1.name2 class 속성 내에  name1  과  name2 가 모두 설정된 모든 요소를 선택합니다 .
.class1 .class2 .name1 .name2 name1 을 가진 요소의 자손인  name2 를 가진 모든 요소를 선택합니다 .
#id #firstname id="firstname"인 요소를 선택합니다.
* * 모든 요소 선택
element p 모든 <p> 요소를 선택합니다.
element.class p.intro class="intro"인 모든 <p> 요소를 선택합니다.
element,element div, p 모든 <div> 요소와 모든 <p> 요소를 선택합니다.
element element div p <div> 요소 내의 모든 <p> 요소를 선택합니다.
element>element div > p 부모가 <div> 요소인 모든 <p> 요소를 선택합니다.
element+element div + p <div> 요소 바로 뒤에 배치되는 첫 번째 <p> 요소를 선택합니다.
element1~element2 p ~ ul <p> 요소가 앞에 오는 모든 <ul> 요소를 선택합니다.
[attribute] [target] 대상 속성이 있는 모든 요소를 선택합니다.
[attribute=value] [target=_blank] target="_blank"인 모든 요소를 선택합니다.
[attribute~=value] [title~=flower] 꽃이라는 단어가 포함된 제목 속성이 있는 모든 요소를 선택합니다.
[attribute|=value] [lang|=en] lang 속성 값이 "en"이거나 "en-"으로 시작하는 모든 요소를 선택합니다.
[attribute^=value] a[href^="https"] href 속성 값이 "https"로 시작하는 모든 <a> 요소를 선택합니다.
[attribute$=value] a[href$=".pdf"] href 속성 값이 ".pdf"로 끝나는 모든 <a> 요소를 선택합니다.
[attribute*=value] a[href*="w3schools"] href 속성 값에 하위 문자열 "w3schools"가 포함된 모든 <a> 요소를 선택합니다.
:active a:active 활성 링크 선택
::after p::after 각 <p> 요소의 내용 뒤에 무언가를 삽입하십시오.
::before p::before 각 <p> 요소의 내용 앞에 무언가를 삽입하십시오.
:checked input:checked 체크된 모든 <input> 요소를 선택합니다.
:default input:default 기본 <input> 요소를 선택합니다.
:disabled input:disabled 비활성화된 모든 <input> 요소를 선택합니다.
:empty p:empty 자식이 없는 모든 <p> 요소 선택(텍스트 노드 포함)
:enabled input:enabled 활성화된 모든 <input> 요소를 선택합니다.
:first-child p:first-child 부모의 첫 번째 자식인 모든 <p> 요소를 선택합니다.
::first-letter p::first-letter 모든 <p> 요소의 첫 글자를 선택합니다.
::first-line p::first-line 모든 <p> 요소의 첫 번째 줄을 선택합니다.
:first-of-type p:first-of-type 부모의 첫 번째 <p> 요소인 모든 <p> 요소를 선택합니다.
:focus input:focus 포커스가 있는 입력 요소를 선택합니다.
:fullscreen :fullscreen 전체 화면 모드에 있는 요소를 선택합니다.
:hover a:hover 마우스 오버 시 링크 선택
:in-range input:in-range 지정된 범위 내의 값을 가진 입력 요소 선택
:indeterminate input:indeterminate 불확실한 상태에 있는 입력 요소를 선택합니다.
:invalid input:invalid 유효하지 않은 값을 가진 모든 입력 요소를 선택합니다.
:lang(language) p:lang(it) lang 속성이 "it"(이탈리아어)인 모든 <p> 요소를 선택합니다.
:last-child p:last-child 부모의 마지막 자식인 모든 <p> 요소를 선택합니다.
:last-of-type p:last-of-type 부모의 마지막 <p> 요소인 모든 <p> 요소를 선택합니다.
:link a:link 방문하지 않은 모든 링크 선택
::marker ::marker 목록 항목의 마커를 선택합니다.
:not(selector) :not(p) <p> 요소가 아닌 모든 요소를 선택합니다.
:nth-child(n) p:nth-child(2) 부모의 두 번째 자식인 모든 <p> 요소를 선택합니다.
:nth-last-child(n) p:nth-last-child(2) 마지막 자식부터 계산하여 부모의 두 번째 자식인 모든 <p> 요소를 선택합니다.
:nth-last-of-type(n) p:nth-last-of-type(2) 마지막 자식부터 계산하여 부모의 두 번째 <p> 요소인 모든 <p> 요소를 선택합니다.
:nth-of-type(n) p:nth-of-type(2) 부모의 두 번째 <p> 요소인 모든 <p> 요소를 선택합니다.
:only-of-type p:only-of-type 부모의 유일한 <p> 요소인 모든 <p> 요소를 선택합니다.
:only-child p:only-child 부모의 유일한 자식인 모든 <p> 요소를 선택합니다.
:optional input:optional 필수 속성이 없는 입력 요소 선택
:out-of-range input:out-of-range 지정된 범위를 벗어난 값을 가진 입력 요소 선택
::placeholder input::placeholder placeholder 속성이 지정된 입력 요소를 선택합니다.
:read-only input:read-only readonly 속성이 지정된 입력 요소를 선택합니다.
:read-write input:read-write readonly 속성이 지정되지 않은 입력 요소를 선택합니다.
:required input:required 필수 속성이 지정된 입력 요소를 선택합니다.
:root :root 문서의 루트 요소를 선택합니다.
::selection ::selection 사용자가 선택한 요소의 부분을 선택합니다.
:target #news:target 현재 활성 #news 요소 선택(해당 앵커 이름이 포함된 URL 클릭)
:valid input:valid 유효한 값을 가진 모든 입력 요소를 선택합니다.
:visited a:visited 방문한 모든 링크 선택

 

반응형

댓글