상태 가상 클래스 선택자
상태 가상 클래스는 사용자가 특정 작업을 할 것으로 예상 될 때 사용된다.
(링크 클릭, 마우스 오버 등등 ..)
:link - 미방문 링크
a:link {
color: red;
}:link 는 모든 후속 상태 가상 클래스 (:active, :hover, :visited 등등 ...) 보다 우선순위가 낮다. :link 는 타 상태 가상 클래스 규칙들 중, 가장 뒤에 정의해야 한다.
:visited - 현재 브라우저에서 방문한 링크 선택
a:visited {
color: blue;
}:hover - 마우스 커서가 링크 위 오버될때 선택
a:hover {
color: orange;
}:active - 클릭, (터치스크린) 탭, (키보드) 탭을 통하여 활성화 될 때 선택
a:active {
color: coral;
}유효성 검사 상태 가상 클래스 선택자
:focus - 초점 맞춘 요소 선택
a:focus {
color: green;
}
input:focus {
background: yellow;
}
textarea:focus {
background: pink;
}:target - 이 가상 클래스는 id와 함께 사용되며, 현재 URL의 해시 태그가 해당 id와 일치 할 때 선택
www.website.com/#projects에있는 경우 #projects:target 선택자가 선택된다.
이 선택자를 사용하여 페이지에 탭을 만들 수 있다. :target 선택자와 일치하여 패널이 활성화 될 때마다, 탭이 해시 태그에 연결된다.
:enabled - 활성화된 input을 선택
:disabled를 추가하지 않는 한 모든 form element는 기본적으로 활성화 상태다.
:disabled - 비활성 상태의 form element를 선택
이 상태에서는 element를 선택, 확인, 활성화하거나 포커스를 받을 수 없다.
<input type="text" id="name" disabled>:disabled {
opacity: .5;
}:checked - 체크 또는 선택된 체크박스 및 라디오 버튼을 선택
:required - required 속성이 있는 form element 선택
<input type="email" required>:required {
color: black;
font-weight: bold;
}:optional - required 속성이 없는 form element 선택
구조적 가상 클래스 선택자
구조적 가상 클래스는 DOM에서 추가 정보를 선택한다.
:root - 문서에서 가장 높은 element를 선택
SVG 또는 XML과 같은 다른 마크 업 언어를 사용하지 않는 한, 거의 <html> element가 선택된다.
:root {
background: coral;
}:first-child - 부모 내부의 첫 번째 element 선택
<ul>
<li>red</li>
<li>not red</li>
<li>not red</li>
</ul>li:first-child {
color: red;
}:last-child - 부모 내부의 마지막 element 선택
<ul>
<li>not red</li>
<li>not red</li>
<li>red</li>
</ul>li:last-child {
color: red;
}:nth-child() - 간단한 공식을 사용하여 순서에 따라 element를 선택
All:nth 는 parameter를 받는다. 수식은 단일 정수, an + b로 구조화된 수식 또는 odd / even 키워드를 사용할 수 있다.
- a와 b는 정수
- a와 b는 0과 음수도 가능
- n에는 0, 1, 2, 3, … 차례대로 대입
<ol>
<li>Hyo-jeong</li>
<li>Mi-mi</li>
<li>You-a/li>
<li>Seung-hee</li>
<li>Ji-ho</li>
<li>Bi-nie</li>
<li>A-rin</li>
</ol>아래 스타일을 적용하면, "Mi-mi"가 노란색이 된다.
ol :nth-child(2) {
color: yellow;
}2 배수 자식들을 선택한다. 그러면 “Mi-mi”, “Seung-hee”, “Bi-nie”가 보라색이 된다.
ol :nth-child(2n) {
color: purple;
}짝수를 선택하려면 아래와 같이 정의하면 된다.
ol :nth-child(even) {
color: yellow;
}아래 스타일은, 5번째부터 시작하여 2배수 자식들을 선택한다. 따라서 "Ji-ho", "A-rin"이 보라색이 된다.
ol :nth-child(2n+5) {
color: purple;
}:nth-of-type() - :nth-child 와 유사하며, 동일한 element 유형에서 선택
**:first-of-type -** 부모 내에서 해당 element의 첫 번째를 선택
<ul>
<li>red</li>
<li>test <span>test</span></li>
<li>test</li>
</ul>ul :first-of-type {
color: red;
}:last-of-type - 부모 내에서 해당 element의 마지막을 선택
<ul>
<li>test <span>test</span> <span>red</span></li>
<li>test</li>
<li>red</li>
</ul>ul :last-of-type {
color: red;
}:nth-last-of-type() - :nth-of-type와 같지만, 수를 아래에서 위로 셈
:nth-last-child() -:nth-child와 같지만, 수를 아래에서 위로 셈
:only-of-type - element가 부모 내에서 유일한 type일 경우에만 선택
관계적 가상 클래스 선택자
:not() - 괄호 안 인자를 제외한 부모 내 모든 요소를 선택
<ul>
<li class="first-item">not red</li>
<li>red</li>
<li>red</li>
<li>not red</li>
</ul>li:not(.first-item) {
color: red;
}
li:not(.first-item):not(:last-of-type) {
color: blue;
}:empty - 텍스트와 element가 없는 element를 선택
띄어쓰기 및 줄바꿈과 같은 공백은 empty로 간주되지 않는다.
