Selectors Level 3

W3C Selectors Level 3 예제 코드입니다.

Universal selector

모든 요소를 선택한다.

* {
	background-color: #0c0;
}

Type selector

이름으로 요소를 선택한다.

div {
	background-color: #0c0;
}

Attribute selectors

속성으로 요소를 선택한다.

속성 이름이 있는 요소

p[title] {
	background-color: #0c0;
}

<p class="example" title="Select me">Should be green.</p>

Should be green.

속성 값이 일치하는 요소

p[id=exactly-equal] {
	background-color: #0c0;
}

<p class="example" id="exactly-equal">Should be green.</p>

Should be green.

속성 값을 공백으로 나눴을 때 일치하는 문자열이 있는 요소

p[class~=space] {
	background-color: #0c0;
}

<p class="example white space seperated">Should be green.</p>

Should be green.

속성 값의 시작 문자열이 일치하는 요소

p[class^=beg] {
	background-color: #0c0;
}

<p class="begins example">Should be green.</p>

Should be green.

속성 값의 끝나는 문자열이 일치하는 요소

p[class$=nds] {
	background-color: #0c0;
}

<p class="example ends">Should be green.</p>

Should be green.

속성 값에 일치하는 문자열이 있는 요소

p[class*=ntain] {
	background-color: #0c0;
}

<p class="example contains substring">Should be green.</p>

Should be green.

속성 값을 하이픈으로 나눴을 때 시작 문자열이 일치하는 요소

명시된 언어를 쉽게 선택하기 위한 셀렉터이다.

p[lang|=ko] {
	background-color: #0c0;
}

<p class="example" lang="ko-kr">Should be green.</p>

Should be green.

Structural pseudo-classes

루트 요소

E:root {
	background-color: #0c0;
}

n번째 자식 요소

p.nth-child span:nth-child(2) {
	background-color: #0c0;
}

<p class="example nth-child">
	<tt>1st</tt>
	<span>2nd</span>
	<tt>3rd</tt>
	<span>4th</span>
	<tt>5th</tt>
</p>

1st 2nd 3rd 4th 5th

뒤에서 n번째 자식 요소

p.nth-last-child span:nth-last-child(2) {
	background-color: #0c0;
}

<p class="example nth-last-child">
	<tt>1st</tt>
	<span>2nd</span>
	<tt>3rd</tt>
	<span>4th</span>
	<tt>5th</tt>
</p>

1st 2nd 3rd 4th 5th

n번째 span 자식 요소

p.nth-of-type span:nth-of-type(2) {
	background-color: #0c0;
}

<p class="example nth-of-type">
	<tt>1st</tt>
	<span>2nd</span>
	<tt>3rd</tt>
	<span>4th</span>
	<tt>5th</tt>
</p>

1st 2nd 3rd 4th 5th

뒤에서 n번째 span 자식 요소

p.nth-last-of-type span:nth-last-of-type(2) {
	background-color: #0c0;
}

<p class="example nth-last-of-type">
	<tt>1st</tt>
	<span>2nd</span>
	<tt>3rd</tt>
	<span>4th</span>
	<tt>5th</tt>
</p>

1st 2nd 3rd 4th 5th

첫번째 자식 요소

p.first-child :first-child {
	background-color: #0c0;
}

<p class="example first-child">
	<span>1st</span>
	<span>2nd</span>
	<span>3rd</span>
	<span>4th</span>
	<span>5th</span>
</p>

1st 2nd 3rd 4th 5th

E:last-child an E element, last child of its parent Structural pseudo-classes 3 E:first-of-type an E element, first sibling of its type Structural pseudo-classes 3 E:last-of-type an E element, last sibling of its type Structural pseudo-classes 3 E:only-child an E element, only child of its parent Structural pseudo-classes 3 E:only-of-type an E element, only sibling of its type Structural pseudo-classes 3 E:empty an E element that has no children (including text nodes) Structural pseudo-classes