선택자

선택자 종류

1. 전체 선택자 : 모든 요소를 선택한다. 추가로 네임스페이스 제한을 둘 수 있다.

2. 유형 선택자 : 주어진 노드 이름을 가진 모든 요소를 선택한다.

3. 클래스 선택자 : 주어진 class 특성을 가진 모든 요소를 선택한다.

4. id 선택자 : id 특성에 따라 요소를 선택한다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 한다.

5. 특성 선택자 : 주어진 특성을 가진 모든 요소를 선택한다.

주요 선택자 - Type, Class, ID

type = 전체를 일괄적으로 바꿀 때 사용.

h2 {
	color: purple;
}

h3 {
	color: red;
}

ID = HTML 태그의 전역속성 ID 속성이 있을 때 사용.(이름표라고 생각. 동명이인을 불가능)

#welcome {
	color: red;
}

Class = ID와 동일한 방법. 

.welcome {
	color: blue;
}

Attribute selector (속성 선택자)

1. [attr]

a[target] {
	color: red;
}

2. [attr=value] 특정한 값에만 줄 때

a[href="https://example.org"]{
	color: blue;
}

3. [attr^value] ^캐럿기호를 사용할 때는 뒤에 있는 값을 선택할 때 사용

a[href^="http"] { a 태그 중에서 href값에 http만 골라달라.
	color:green
    
4. [attr$value] $기호를 사용할 때는 문자열이 끝나는 애들을 골라라

a[href$="com"] { a 태그 중에서 href값에 com으로 끝나는 애들을 골라줘라.
	color:green
}

5. [attr*=value] 적어도 하나가 포함

a[href*="example"] { 적어도 example을 가지고 있으면 다 선택해달라. 
	color:green

가상클래스 선택자 - first-child, last-child, nth-child

/*Pseudo-Class Selector (가상 클래스 선택자)*/

selector:_____ {
	property:value;
}

1. first-child 요소의 첫번째 자식

.movie:first-child{ movie 클래스의 첫번째 자식  
	color: red;
}

2. last-child 요소의 마지막 자식

.movie:last-child{ movie 클래스의 마지막 자식
	color: red;
}

2. nth-child 몇번째 자식을 사용할지

.movie:nth-child(3){ movie 클래스의 3번째 자식
	color: red;
}

추가로 nth-child(2n) 2*n 으로 짝수마다 나온다
nth-child(2n - 1) 홀수

가상클래스 선택자 - first-child VS first-of-type

1. first-of-type 타입들중에 첫번째 자식

p:first-of-type{ p 태그 타입중 첫번째
	color: red;
}

2. last-of-type 타입들중에 마지막 자식

p:last-of-type{ p태그 타입중 마지막 
	color: red;
}

2. nth-of-type 몇번째 자식을 사용할지

p:nth-of-type(3){ 
	color: red;
}

가상클래스 선택자 - not

selector:not(selector){

}

input:not(제외하고싶은 요소 또는 어트리뷰트셀렉터([type=password])) {
	background-color: indianred;
}

가상클래스 선택자 - link, visited

a:link{ 선택하지 않았을 경우
	color: tomato;
}

a:visited{ 선택했을 경우
	color: blue;
}

동적 가상클래스 선택자 - hover, active, focus

input[type=button]:hover { hover로 인해 마우스를 올렸을 때 색이 바뀐다.
	background-color: indianred;
}

input[type=button]:active { active로 인해 마우스를 클릭하고 있을 때 색이 바뀐다.
	background-color: indianred;
}

input[type=button]:focus { 어떤 특정 요소에 포커싱이 되었을 때
	background-color: indianred;
}