[CSS] Selector

attribute 셀렉터

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

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

형제 셀렉터

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

section ~ p { }

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

인접 형제 셀렉터

인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다.
예시의 경우 <section> 요소 바로 뒤에 있는 <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 : 체크 상태일 때 선택
• input:enabled : 사용 가능한 상태일 때 선택
• input:disabled : 사용 불가능한 상태일 때 선택

정합성 확인 셀렉터

input 요소에 required 속성이 있어야 적용됨.
required 필수값을 확인한다. input에 값이 있는지 여부를 판단.

• input[type="text"]:valid : input에 값이 있을 때
• input[type="text"]:invalid : input에 값이 없을 때