CSS 셀렉터

[셀렉터]

 

 

 

 

1. 전체 셀렉터(universal selector)

 

문서의 모든 요소를 선택

 

* { }

 

 

 

2. 태그 셀렉터

 

같은 태그명을 가진 모든 요소를 선택 (복수 가능)

 

h1 { }
div { }

section, h1 { }

 

 

 

3. ID 셀렉터

 

#id

 

#only { }

 

 

 

4. class 셀렉터

 

.class

같은 class를 가진 모든 요소를 선택한다.

 

.widget { }
.center { }

 

 

 

5. attribute 셀렉터

 

같은 속성을 가진 요소를 선택

 

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

 

 

 

6. 자식 셀렉터

 

자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다. 

* <header> 요소의 바로 아래 자식인 <p> 요소만 선택된다.

 

header > p { }

 

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

 

 

 

7. 후손 셀렉터

 

첫 번째로 입력한 요소의 후손을 선택한다.

 * <header> 요소의 자식의 자식인 <p> 요소까지 모두 선택된다.

 

header p {}

 

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

 

 

 

8. 형제 셀렉터

 

같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택한다.

 

section ~ p { }

 

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

 

 

 

9. 인접 형제 셀렉터

 

인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다.

 

section + p { }

 

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

 

 

 

10. 기타 셀렉터

 

1)가상 클래스 셀렉터

 

요소의 상태 정보에 기반해 요소를 선택

 

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

 

 

2)UI 요소 상태 셀렉터

 

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

 

 

3)구조 가상 클래스 셀렉터

 

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) { }

 

 

4.부정 셀렉터

 

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

 

 

5.정합성 확인 셀렉터

 

input[type="text"]:valid { }
input[type="text"]:invalid { }

 

 

 

 

 

⭐️더 많은 정보 알아보기⭐️

 

https://www.w3schools.com/cssref/

CSS Reference