| 양쪽 이전 판
이전 판
다음 판
|
이전 판
|
wiki:css:css_note:css_pseudo-class [2021/03/29 20:03]
emblim98 |
wiki:css:css_note:css_pseudo-class [2023/01/13 18:44] (현재)
|
| </html> | </html> |
| </HTML> | </HTML> |
| | \\ |
| | =====CSS - The :lang Pseudo-class===== |
| | ''%%:lang%%''가상 클래스를 사용하면 다른 언어에 대한 특수 규칙을 정의할 수 있습니다.\\ |
| | \\ |
| | 하기 예제에서 ''%%:lang%%''은 lang = "no"로 <q> 요소에 대한 따옴표(quotation marks)를 정의합니다.\\ |
| | ====예제==== |
| | <HTML> |
| | <!DOCTYPE html> |
| | <html> |
| | |
| | <head> |
| | <style> |
| | q:lang(no) { |
| | quotes: "~""~"; |
| | } |
| | </style> |
| | </head> |
| | |
| | <body> |
| | |
| | <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> |
| | <p>In this exmaple, ;lang defines the quotation marks for q elements with lang="no":</p> |
| | |
| | </body> |
| | |
| | </html> |
| | </HTML> |
| | 쌍따옴표가 물결표시(~)로 변합니다.\\ |
| | =====All CSS Pseudo Classes===== |
| | ^ Selector ^ Example ^ Example description ^ |
| | ^ :active ^ a:active ^ 활성 링크를 선택합니다. ^ |
| | | :checked | input:checked | 선택된 모든 <input> 요소를 선택합니다 | |
| | ^ :disabled ^ input:disabled ^ 비활성화된 모든 <input> 요소를 선택합니다. ^ |
| | | :empty | p:empty | 자식이 없는 모든 <p> 요소를 선택합니다. | |
| | ^ :enabled ^ input:enabled ^ 활성화된 모든 <input> 요소를 선택합니다. ^ |
| | | :first-child | p:first-child | 부모의 첫 번째 자식인 모든 <p> 요소를 선택합니다. | |
| | ^ :first-of-type ^ p:first-of-type ^ 부모의 첫 번째 <p> 요소인 모든 <p> 요소를 선택합니다. ^ |
| | | :foucs | input:focus | 포커스가 있는 <input> 요소를 선택합니다. | |
| | ^ :hover ^ a:hover ^ 마우스 오버 시 링크를 선택합니다. ^ |
| | | :in-range | input:in-range | 지정된 범위 내의 값을 가진 <input> 요소를 선택합니다. | |
| | ^ :invalid ^ input:invalid ^ 유효하지 않은 값을 가진 모든 <input> 요소를 선택합니다. ^ |
| | | :lang(language) | p:lang(it) | "it"로 시작하는 lang 속성 값을 가진 모든 <p> 요소를 선택합니다. | |
| | ^ :last-child ^ p:last-child ^ 부모의 마지막 자식인 모든 <p> 요소를 선택합니다. ^ |
| | | :last-of-type | p:last-of-type | 부모의 마직막 <p> 요소인 모든 <p> 요소를 선택합니다. | |
| | ^ :link ^ a:link ^ 방문하지 않은 모든 링크를 선택합니다. ^ |
| | | :not(selected) | :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 ^ 필요 속성이 없는 <input> 요소를 선택합니다. ^ |
| | | :out-of-range | input:out-of-range | 지정 범위를 벗어난 값을 가진 <input> 요소를 선택합니다. | |
| | ^ :read-only ^ input:read-only ^ "readonly" 속성이 지정된 <input> 요소를 선택합니다. ^ |
| | | :read-write | input:read-write | "readonly" 속성이 없는 <input> 요소를 선택합니다. | |
| | ^ :required ^ :input:required ^ "required(필수)" 속성이 지정된 <input> 요소를 선택합니다. ^ |
| | | :root | root | 문서의 root 요소를 선택합니다. | |
| | ^ :target ^ #news:target ^ 현재 활성화된 #news 요소를 선택합니다(해당 앵커 이름이 포함된 URL이 클릭된) ^ |
| | | :valid | input:valid | 유효 값을 가진 모든 <input> 요소를 선택합니다. | |
| | ^ :visited ^ a:visited ^ 방문한 모든 링크를 선택합니다. ^ |
| | |
| | |
| | |
| | |
| |
| |
