티스토리툴바

Front End/HTML, CSS

선택자 Selector

선택자 Selector

선택자(Selector)는 CSS 속성을 적용할 대상을 선택하는 방법을 의미한다. 일반적으로 id와 class를 기준으로 많이 작성하지만, 이 외에도 CSS에서는 다양하게 활용할 수 있는 셀렉터를 제공한다.

기본 셀렉터

전체 셀렉터

문서의 모든 요소를 선택한다.

* { }

태그 셀렉터

같은 태그명을 가진 모든 요소를 선택한다. 복수 선택도 가능.

h1 { }
div { }

section, h1 { }

attribute 셀렉터

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

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

ID 셀렉터

ID 셀렉터는 #id로 입력하여 선택합니다.

#only { }

class 셀렉터

class 셀렉터는 .class로 입력하여 선택합니다. 같은 class를 가진 모든 요소를 선택합니다.

.widget { }
.center { }

자식 / 후손 / 형제 셀렉터

자식 셀렉터 >

첫번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다. 바로 한 단계 밑의 요소만 선택되기 때문에 후손 셀렉터와 차이를 반드시 명심해야 한다.

ex. header > p

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

후손 셀렉터

ex. header p

첫번째로 입력한 요소의 후손을 선택한다. 바로 한 단계 밑이 아니더라도 모두 선택 되기 때문에 자식 셀렉터와 차이를 반드시 명심해야 한다.

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

형제 셀렉터 ~

같은 부모 요소를 공유하면서 첫 번째 입력한 요소 뒤에 오는 두 번째 요소를 모두 선택한다. 아래의 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소를 모두 선택한다.

ex. section ~ p { }

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

인접 형제 셀렉터 +

같은 부모 요소를 공유하면서 첫 번째 입력한 요소 뒤에 오는 두 번째 요소를 선택한다. 아래의 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소 중 첫 요소를 선택한다.

ex. section + p { }

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

기타 셀렉터

가상 클래스 셀렉터

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

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

UI 요소 상태 셀렉터

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

구조 가상 클래스 셀렉터

p:first-child { } /*여러 p 중 첫 번째 p를 선택한다.*/
ul > li:last-child { } /*ul의 자식인 li 중에서 마지막 li를 선택한다.*/
ul > li:nth-child(2n) { } /*ul의 자식인 li 중에서 2의 배수 번째를 선택한다.*/
section > p:nth-child(2n+1) { } /* section의 자식인 p 중 2의 배수+1 번째를 선택한다.*/
ul > li:first-child { } /*ul의 자식인 li 중에서 첫 번째 li를 선택한다.*/
div > div:nth-child(4) { }/*div의 자식인 div 중 네 번째 div를 선택한다.*/
div:nth-last-child(2) { }/*여러 div 중 마지막 부터 두 번째 div를 선택한다.*/
p:first-of-type { }/*여러 p 중 자신의 유형과 일치하는 첫 번째 p를 선택한다.*/
div:last-of-type { }/*여러 div 중 자신의 유형과 일치하는 마지막 div를 선택한다.*/
ul:nth-of-type(2) { }/*여러 ul 중 자신의 유형과 일치하는 두 번째 ul을 선택한다.*/
p:nth-last-of-type(1) { } /*여러 ul 중 자신의 유형과 일치하는 마지막 부터 두 번째 ul을 선택한다.*/

부정 셀렉터

input:not([type="password"]) { } /*속성이 type="password" 가 아닌 input을 선택한다.*/
div:not(:nth-of-type(2)) { }/*여러 div 중 자신의 유형과 일치하는 두 번째 div를 제외하고 선택한다.*/

정합성 확인 셀렉터

input[type="text"]:valid { }
input[type="text"]:invalid { }
/*input의 type 속성에 맞는 값이 들어 갔을 때와 그렇지 않을 때 선택한다.*/

Uploaded by N2T

티스토리툴바