[CSS] CSS selector

HTML 태그에 CSS 속성을 적용하기 위해선 id 와 class를 사용해야한다. 이처럼 CSS 속성을 적용할 대상을 선택하는 방법을 CSS selector 라고 한다 . 오늘은 Css selector에 대해 학습해보자. 

 

기본 셀렉터

전체 셀렉터

전체 셀렉터는 문서의 모든 요소를 선택한다. 

* { } 

태그 셀렉터 

태그 셀렉터는 같은 태그명을 가진 모든요소를 선택한다. 복수로도 선택 가능하다. 

h1{ }
div{ }
h2, section { } ( , 를 꼭 써줘야 복수 선택이 가능하다 )

ID 셀렉터 

ID셀렉터는 #id명 으로 입력하여 선택한다. 

#container { }

class 셀렉터

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

.box{ }
.food{ }

attribute 셀렉터 

attribute 셀렉터는 같은 속성을 가진 요소를 선택한다. 

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

 

---

자식 / 후손 /  형제 셀렉터 

사실 항상 작업을 하면서 모든 태그에 class ,id 값을 주면서 작업을 해왔었다. 그랬더니 태그가 늘어날 때마다 클래스 이름 짓는데 고생을 했던 기억이있다. 진작에 자식 , 후손 ,형제 셀렉터를 알았다면 정말 편리하게 사용했을 거같다 !! 

 

자식셀렉터 

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

header > div {}

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

header 바로 아래 자식 요소인 div 두개를 선택한다. 

 

후손셀렉터

header div{}

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

 

후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택한다.  위와 같은 예제에서는 header 자식인 div 요소 뿐만 아니라 p 요소 안 div 도 모두 선택됨 . 

 

형제셀렉터

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

section ~ p { }

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

 

인접형제셀렉터

인접 형제 셀렉터는 같은 부모 요소를 공유하면서 첫 번째 입력한 요소 바로 뒤에 오는 두번째 입력한 요소를 선택한다. 위의 예제에서는 p 요소중 첫 번째 요소를 선택한다. 자식 중  첫째 자식을 선택한다고 생각하면 된다. 

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