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 | 방문한 모든 링크 선택 |
반응형
댓글