[css] Selector

 

 

 

기본 셀렉터

 

 

* { } // 전체 셀렉터
h1 {}
div {}
section,h1 {} // 택스 셀렉터 (복수 선택 가능)
#only {} // id 셀렉터
.widget {}
.center {} // class 셀렉터
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { } // attribure 셀렉터

 

 

자식/후손/형제 셀렉터

 

자식

header > p { }

 

<header>
<p> <!-- 선택 -->
		<span>
				<p></p>
		</span>
</p>
<p> <!-- 선택 -->
		<span>
				<p></p>
		</span>
</p>
</header>

 

후손

header p {}

 

<header>
<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
</p>
<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
</p>
</header>

 

형제

section ~ p { }

 

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>

 

인접 형제

section + p { }

 

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>

 

기타

 

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */ // 가상

input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */ // UI 요소 상태

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { } // 구조

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { } // 부정

input[type="text"]:valid { }
input[type="text"]:invalid { } // 정합성 확인