CSS : 셀렉터

셀렉터(Selector)

기본 셀렉터

• class 셀렉터
  .class 로 선택, 같은 class 가진 모든 요소 선택

.widget {}
.center {}
.widget.cetner {} /*widget, center 클래스 두개 다 가진 요소 선택*/

• id 셀렉터
  #id 로 선택

#only {}

• 전체(문서의 모든 요소) 셀렉터

* {}

• 태그 셀렉터
  같은 태그명을 가진 모든 요소 선택, 복수로도 선택할 수 있음

h1 {}
div {}
section, h1 {} /*section과 h1 두개 요소 선택*/

attribute 셀렉터

참고링크

• a[href] {}
  a 태그 뒤에 삽입된 속성명 href 선택

• p[id="only"] {}
  p 태그에 속성명 id 가 일치할 때 속성값에 only 이 들어간
  독립단어

• p[class~="out"] {}
  p 태그에 속성명 class 가 일치할 때 속성값에 out 이 들어간
  독립단어 , 공백으로 띄어진 합성어 의 경우 선택

• div[class*="w"] {}
  div 태그에 속성명 class 가 일치할 때 속성값에 * 가 들어간
  모든 경우 선택

• p[class|="out"] {}
  p 태그에 속성명 class 가 일치할 때 속성값에 out 이 들어간
  독립단어 , -로 연결된 접두사 (ex.faker-SKT1) 의 경우 선택

• section[id^="sect"] {}
  section 태그에 속성명 id 가 일치할 때 속성값에 sect 가 들어간
  독립단어 , 접두사 (-, _, 공백 관계없이 앞에) 의 경우 선택

• div[class$="2"] {}
  div 태그에 속성명 class 가 일치할 때 속성값에 2 가 들어간
  독립단어 , 접미사 (-, _, 공백 관계없이 뒤에) 의 경우 선택
  
  

선택자	기능	하이픈-	언더바_	공백	합성어
[속성]	[속성명]	X	X	X	X
[속성 = "값"]	[속성명+속성값]	X	X	X	X
[속성 ~= "값"]	[속성명+특정 문자 들어간 속성값]	X	X	O	X
[속성 *= "값"]	[속성명+특정 문자 들어간 속성값]	O	O	O	O
[속성 ㅣ= "값"]	[속성명+접두사로 시작한 속성값]	O	X	X	X
[속성 ^= "값"]	[속성명+접두사로 시작한 속성값]	O	O	O	O
[속성 $= "값"]	[속성명+접미사로 끝난 속성값]	O	O	O	O

---

자식 후손 형제 셀렉터

자식 셀렉터

> : 첫번째로 입력한 요소의 바로 아래 자식인 요소를 선택

header > p {}

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

후손 셀렉터

(띄어쓰기) : 첫번째로 입력한 요소의 후손 요소를 전부 선택

header p {}

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

형제 셀렉터

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

section ~ p {}

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

인접 형제 셀렉터

+ : 같은 부모를 공유하면서, 첫번째 입력한 요소 바로 뒤에 오는 두번째 입력 요소만 선택

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 {} :
• li:last-child {} :
• p:nth-child(2n) {} :
• p:nth-child(2n+1) {} :
• div:nth-child(4) {} :
• div:nth-last-child(2) {} :
• div:nth-first-child(2n+1) {} :
• p:first-of-type {} :
• div:last-of-type {} :
• ul:nth-of-type(2) {} :
  
  

4. n의 배수 + n (특정 순서)

• 5의 배수에 1 더하기 선택자 : nth-child(5n+1) -> 결과 : 1, 6, 11, 16, 21
  (배수는 0부터 계산된다. 그래서 5x0 = 0 + 1 = 1 도 결과 값이 된다.)

부정 셀렉터

:not() {} 선택자는 해당 선택자를 제외된 나머지 요소 선택하기 위해 사용

ul li:not(.list) {
  color: red;
}

<ul>
  <li>가나다</li> <!-- 선택 -->
  <li class="list">123</li> 
  <li>abc</li> <!-- 선택 -->
</ul>

정합성 확인 셀렉터 (input, form)

:valid : 정합성 검증이 성공한 input , form 요소를 선택
:invalid : 정합성 검증이 실패한 input , form 요소를 선택

/* 적합성 검증 성공 */
input[type="text"]:valid {
  color: blue;
}

/* 적합성 검증 실패 */
input[type="text"]:invalid {
  color: red;
}