w3ii 'CSS 참조는 모든 주요 브라우저와 정기적으로 시험한다.
CSS 선택기
CSS에서 선택기는 선택하는 데 사용 패턴이있는 element(s) 당신이 스타일을 원하는합니다.
"CSS" 열은 CSS 버전에서 속성 정의를 나타냅니다 (CSS1, CSS2, or CSS3) .
| 선택자 | 예 | 예 설명 | CSS |
|---|---|---|---|
| . class | .intro | 모든 요소를 선택 class="intro" | 1 |
| # id | #firstname | 와 요소를 선택 id="firstname" | 1 |
| * | * | 모든 요소를 선택합니다 | 2 |
| element | p | 모든 선택 <p> 요소를 | 1 |
| element,element | div, p | 모든 선택 <div> 요소와 모든 <p> 요소를 | 1 |
| element element | div p | 모든 선택 <p> 내부 요소를 <div> 요소를 | 1 |
| element > element | div > p | 모든 선택 <p> 부모가 인 요소 <div> 요소를 | 2 |
| element + element | div + p | 모든 선택 <p> 바로 뒤에 배치 된 요소 <div> 요소를 | 2 |
| element1 ~ element2 | P ~ UL | 모든 선택 <ul> 앞에는하는 요소 <p> 요소를 | 3 |
| [ attribute ] | [target] | 대상 속성을 가진 모든 요소를 선택합니다 | 2 |
| [ attribute = value ] | [target=_blank] | 모든 요소를 선택합니다 target="_blank" | 2 |
| [ attribute ~= value ] | [title~=flower] | 단어가 포함 된 제목 속성을 가진 모든 요소 선택 "flower" | 2 |
| [ attribute |= value ] | [lang|=en] | lang 속성 값으로 시작하는 모든 요소 선택 "en" | 2 |
| [ attribute ^= value ] | a[href^="https"] | 모든 선택 <a> 요소 href 속성 값이 시작 "https" | 3 |
| [ attribute $= value ] | a[href$=".pdf"] | 모든 선택 <a> href 속성 값으로 끝나는 요소 ".pdf" | 3 |
| [ attribute *= value ] | a[href*="w3ii"] | 모든 선택 <a> 요소 href 속성 값이 문자열을 포함을 "w3ii" | 3 |
| :active | a:active | 활성 링크를 선택합니다 | 1 |
| ::after | p::after | 각각의 내용 이후에 뭔가를 삽입 <p> 요소 | 2 |
| ::before | p::before | 각각의 내용 이전에 무언가를 삽입 <p> 요소 | 2 |
| :checked | input:checked | 모든 선택 선택 <input> 요소를 | 3 |
| :disabled | input:disabled | 모든 장애인 선택 <input> 요소를 | 3 |
| :empty | p:empty | 모든 선택 <p> 아이가없는 요소 (including text nodes) | 3 |
| :enabled | input:enabled | 모든 사용 선택 <input> 요소를 | 3 |
| :first-child | p:first-child | 모든 선택 <p> 부모의 첫 번째 자식 요소를 | 2 |
| ::first-letter | p::first-letter | 모든의 첫 글자 선택 <p> 요소를 | 1 |
| ::first-line | p::first-line | 모든의 첫 번째 행 선택 <p> 요소를 | 1 |
| :first-of-type | p:first-of-type | 모든 선택 <p> 이 처음이다 요소 <p> 부모의 요소를 | 3 |
| :focus | input:focus | 포커스가 입력 요소를 선택 | 2 |
| :hover | a:hover | 이상 마우스의 링크를 선택합니다 | 1 |
| :in-range | input:in-range | 지정된 범위 내의 값으로 입력 요소를 선택 | 3 |
| :invalid | input:invalid | 잘못된 값을 가진 모든 입력 요소를 선택합니다 | 3 |
| :lang( language ) | p:lang(it) | 모든 선택 <p> A의 요소 lang 동일한 속성을 "it" (Italian) | 2 |
| :last-child | p:last-child | 모든 선택 <p> 부모의 마지막 자식 요소를 | 3 |
| :last-of-type | p:last-of-type | 모든 선택 <p> 마지막 인 요소 <p> 부모의 요소를 | 3 |
| :link | a:link | 모든 방문하지 않은 링크를 선택합니다 | 1 |
| :not( selector ) | :not(p) | 하지 않은있는 모든 요소 선택 <p> 요소를 | 3 |
| :nth-child( n ) | p:nth-child(2) | 모든 선택 <p> 부모의 두 번째 자식 요소를 | 3 |
| :nth-last-child( n ) | p:nth-last-child(2) | 모든 선택 <p> 마지막 아이부터 계산, 부모의 두 번째 자식 요소를 | 3 |
| :nth-last-of-type( n ) | p:nth-last-of-type(2) | 모든 선택 <p> 두 번째 인 요소 <p> 마지막 아이부터 계산, 부모의 요소를 | 3 |
| :nth-of-type( n ) | p:nth-of-type(2) | 모든 선택 <p> 두 번째 인 요소 <p> 부모의 요소를 | 3 |
| :only-of-type | p:only-of-type | 모든 선택 <p> 만입니다 요소 <p> 부모의 요소를 | 3 |
| :only-child | p:only-child | 모든 선택 <p> 부모의 유일한 자식 요소를 | 3 |
| :optional | input:optional | 아니오 입력 요소를 선택합니다 "required" 속성 | 3 |
| :out-of-range | input:out-of-range | 지정된 범위를 벗어난 값이 입력 요소를 선택합니다 | 3 |
| :read-only | input:read-only | 와 입력 요소 선택 "readonly" 속성 지정을 | 3 |
| :read-write | input:read-write | 와 입력 요소 선택 "readonly" 지정되지 않은 속성을 | 3 |
| :required | input:required | 에 입력 요소를 선택합니다 "required" 지정된 속성 | 3 |
| :root | :root | 문서의 루트 요소를 선택합니다 | 3 |
| ::selection | ::selection | 사용자에 의해 선택된 요소의 일부를 선택 | |
| :target | #news:target | (즉 앵커의 이름이 포함 된 URL 클릭) 현재 활성 #news 요소를 선택합니다 | 3 |
| :valid | input:valid | 유효한 값 모든 입력 요소를 선택합니다 | 3 |
| :visited | a:visited | 모든 방문한 링크를 선택합니다 | 1 |