Note: a:hover come after a:link and a:visited in the CSS definition in order to be effective.
Note: a:active MUST cone after a:hover in the CSS definition in order to be effective.
\\ **Note:**\\ ''%%a:hover%%''는 CSS 정의에서 ''%%a:link%%'' 및 ''%%a:visited%%'' 뒤에 와야 효과적입니다.\\ ''%%a:active%%''는 CSS 정의에서 ''%%a:hover%%'' 뒤에 와야 효과적입니다.\\ 가상 클래스 이름은 대소문자를 구분하지 않습니다.\\ \\ =====Pseudo-classes and CSS Classes===== 가상 클래스는 CSS 클래스와 결합될 수 있습니다.\\ \\ 예제의 링크 위로 마우스를 가져 가면, 색상이 변경됩니다.\\ ====예제====When you hover over the first link below, it will change color:
\\ =====Hover onMouse over the div element below to change its background color:
%%'' 요소를 나타냅니다.\\ ====예제====
Tada! Here I am!
element===== 하기 예제에서 셀텍터(selector)는 요소의 첫 번째 하위 요소인
요소와 일치합니다.\\ ====예제====
This is some text.
This is some text.
\\ =====Match the first element in allelements===== 하기 예제에서 셀렉터(selector)는 모든
요소의 첫 번째 요소와 일치합니다.\\ ====예제====
I am a strong person. I am a strong person
I am a strong person. I am a strong person
\\ =====Match all elements in all first childelements===== 다음 예제에서, 셀렉터(selector)는 다른 요소의 첫 번째 자식인
요소의 모든 요소와 일치합니다:\\ ====예제====
I am a strong person. I am a strong person
I am a strong person. I am a strong person
\\ =====CSS - The :lang Pseudo-class===== ''%%:lang%%''가상 클래스를 사용하면 다른 언어에 대한 특수 규칙을 정의할 수 있습니다.\\ \\ 하기 예제에서 ''%%:lang%%''은 lang = "no"로요소에 대한 따옴표(quotation marks)를 정의합니다.\\ ====예제====Some text
A quote in a paragraphSome text.In this exmaple, ;lang defines the quotation marks for q elements with lang="no":
쌍따옴표가 물결표시(~)로 변합니다.\\ =====All CSS Pseudo Classes===== ^ Selector ^ Example ^ Example description ^ ^ :active ^ a:active ^ 활성 링크를 선택합니다. ^ | :checked | input:checked | 선택된 모든 요소를 선택합니다 | ^ :disabled ^ input:disabled ^ 비활성화된 모든 요소를 선택합니다. ^ | :empty | p:empty | 자식이 없는 모든요소를 선택합니다. | ^ :enabled ^ input:enabled ^ 활성화된 모든 요소를 선택합니다. ^ | :first-child | p:first-child | 부모의 첫 번째 자식인 모든
요소를 선택합니다. | ^ :first-of-type ^ p:first-of-type ^ 부모의 첫 번째
요소인 모든
요소를 선택합니다. ^ | :foucs | input:focus | 포커스가 있는 요소를 선택합니다. | ^ :hover ^ a:hover ^ 마우스 오버 시 링크를 선택합니다. ^ | :in-range | input:in-range | 지정된 범위 내의 값을 가진 요소를 선택합니다. | ^ :invalid ^ input:invalid ^ 유효하지 않은 값을 가진 모든 요소를 선택합니다. ^ | :lang(language) | p:lang(it) | "it"로 시작하는 lang 속성 값을 가진 모든
요소를 선택합니다. | ^ :last-child ^ p:last-child ^ 부모의 마지막 자식인 모든
요소를 선택합니다. ^ | :last-of-type | p:last-of-type | 부모의 마직막
요소인 모든
요소를 선택합니다. | ^ :link ^ a:link ^ 방문하지 않은 모든 링크를 선택합니다. ^ | :not(selected) | :not(p) |
요소가 아니 모든 요소를 선택합니다. | ^ :nth-child(n) ^ p:nth-child(2) ^ 부모의 두 번째 자식인 모든
요소를 선택합니다. ^ | :nth-last-child(n) | p:nth-last-child(2) | 마지막 자식부터 계산하여 부모의 두 번째 자식인 모든
요소를 선택합니다. | ^ :nth-last-of-type(n) ^ p:nth-last-of-type(2) ^ 마지막 자식부터 계산하여, 부모의 두 번째
요소인 모든
요소를 선택합니다. ^ | :nth-of-type(n) | p:nth-of-type(2) | 부모의 두 번째
요소인 모든
요소를 선택합니다. | ^ :only-of-type ^ p:only-of-type ^ 부모의 유일한
요소인 모든
요소를 선택합니다. ^ | :only-child | p:only-child | 부모의 유일한 자식인 모든
요소를 선택합니다. | ^ :optional ^ input:optional ^ 필요 속성이 없는 요소를 선택합니다. ^ | :out-of-range | input:out-of-range | 지정 범위를 벗어난 값을 가진 요소를 선택합니다. | ^ :read-only ^ input:read-only ^ "readonly" 속성이 지정된 요소를 선택합니다. ^ | :read-write | input:read-write | "readonly" 속성이 없는 요소를 선택합니다. | ^ :required ^ :input:required ^ "required(필수)" 속성이 지정된 요소를 선택합니다. ^ | :root | root | 문서의 root 요소를 선택합니다. | ^ :target ^ #news:target ^ 현재 활성화된 #news 요소를 선택합니다(해당 앵커 이름이 포함된 URL이 클릭된) ^ | :valid | input:valid | 유효 값을 가진 모든 요소를 선택합니다. | ^ :visited ^ a:visited ^ 방문한 모든 링크를 선택합니다. ^ {{tag>오션 CSS Pseudo-classes}}