css) css 셀렉터

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

*(별표) 사용

*{
	color : red;
}

2. 태그 셀렉터
   같은 태그명을 가진 모든 요소를 선택한다.

태그1{
	color : red;
}

, 로 구분해주면 중복선택이 가능하다.

태그1, 태그2{
	color : red;
}

3. id 셀렉터
   같은 id를 가진 모든 요소를 선택한다.

#id형태로 id를 찾는다.

#아이디{
	color : red;
}

4. class 셀렉터
   같은 class를 가진 모든 요소를 선택한다.

.class형태로 class를 찾는다.

 .클래스{
 	color : red;
 }

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

a[href]{ 
	color : red;
}// a요소중에 href 속성이 있는 요소를 선택///

p[id="only"]{
> 	color : red;
}//p요소중에 id가 only인 요소를 선택

div[class="widget"]{
	color : red;
}//div요소중에 class가 widget인 요소를 선택

속성 선택자
^= 특정 문자로 시작할때 사용
.toy[category^="Swim"

$= 특정 문자로 끝날때 사용 img[src$=."jpg"]

= 특정 문자를 포함할때 사용
img[src="/thumbnails/"]

6. 자식 셀렉터
   첫번째 요소 바로 아래 있는 두번째 입력요소에 해당되는 자식요소 전부를 선택한다.

section > p{} 경우

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

7. 후손 셀렉터
   첫번째 요소 안에 있는 요소들중에서 두번째 입력요소에 해당되는 자식요소 전부를 선택한다.

section > 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. 가상 클래스 셀렉터
    해당 요소의 상태정보에 기반해서 요소를 선택한다.

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

11. ui 요소 상태 셀렉터
    해당 요소의 상태정보에 기반해서 요소를 선택한다.

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

12. 구조 가상 클래스 셀렉터

p:first-child { } // p요소이면서 첫번째 자식이 되는 요소
ul > li:last-child { } // ul요소를 부모로 가지고 li요소이면서 마지막 자식이 되는 요소
ul > li:nth-child(2n) { } // ul을 부모로 가지고 li요소이면서 짝수번째가 되는 요소
section > p:nth-child(2n+1) { } // section을 부모로 가지고 p요소이면서 홀수번째 자식이 되는 요소
ul > li:first-child { } //ul을 부모로 가지고 li요소이면서 첫번째 자식가 되는 요소
li:last-child { } //li요소이면서 마지막 자식이되는 요소
div > div:nth-child(4) { } // div를 부모로 가지고 div요소이면서 4번째 자식이 되는 요소
div:nth-last-child(2) { } // div요소이면서 뒤에서 2번째 자식이 되는 요소
section > p:nth-last-child(2n + 1) { } // section을 부모로 가지고 p요소이면서 뒤에서 홀수번째 자식이 되는 요소
p:first-of-type { } // p요소이면서 첫번째 자식이 되는 요소
div:last-of-type { } // div요소이면서 마지막 자식이 되는 요소
ul:nth-of-type(2) { } // ul요소이면서 2번째 자식이 되는 요소. 다만 같은 ul요소로만 순서 체크
p:nth-last-of-type(1) { } // p요소이면서 뒤에서 1번째 자식이 되는 요소. 다만 같은 p요소로만 순서 체크

13. 부정 셀렉터

input:not([type="password"]) { } // input 요소이면서 type속성값이 password가 아닌 요소
div:not(:nth-of-type(2)) { } // div 요소이면서 2번째 자식이 아닌 요소들. 다만 같은 div요소로만 체크

14. 정합성 확인 셀렉터

input[type="text"]:valid { } // 정합성 검증이 성공한 input요소를 선택
input[type="text"]:invalid { } // 정합성 검증이 실패한 input요소를 선택