01. 주요 선택자

01-1. 전체 선택자 (Universal Selector)

• 모든 HTML 요소에 접근이 가능한 선택자
• * 로 나타냄

* {
	color :  green;
}

01-2. 타입 선택자 (Type Selector)

• 태그 이름을 사용해서 나타냄
• 해당 태그에 해당하는 모든 속성을 적용함
• 특정 요소를 선택할 때 사용하지 말고 일관적으로 적용해야하는 스타일이 있을 때 사용해라!

h2 {
	color : purple;
}

01-3. 클래스 선택자 (Class Selector)

• 여러 개가 존재할 수 있음. 중복 가능!
• . 을 사용하여 나타냄
• 스페이싱을 하면 두 개의 이름도 사용할 수 있음

.blue {
	color : blue;
}

<ul>
	<li class="blue red">Toy Story</li>
</ul>

01-4. 아이디 선택자 (ID Selector)

• 이름표라고 생각하면 쉬움. 유일하고 유니크한 이름
• 특정 요소 하나에만 해당되는 이름. 중복 안됨!
• 자바스크립트 컨트롤에서 많이 사용됨

  #welcome-title {
  	color : red;
  }

---

02. 속성 선택자 (Attribute Selector)

02-1. [attr]

<a href="http://example.com" target="_blank">
  Example Link
</a>

a[target] {
	color :  hotpink;
}

✔ target 이라는 속성을 가진 애들만 선택하여 적용

02-2. [attr=value]

• input 을 선택할 때 많이 씀
• 구체적으로 원하는 요소를 선택할 수 있음

<input type="text">
<input type="submit">
<input type="reset">

input[type="text"] {
	background-color :  red;
}

02-3. [attr^=value]

• 부분적으로 문자열이 일치하더라도 선택이 되게끔 할 수 있음
• ""값으로 시작하는 애들로 선택해주세요!

<a href="http://example.com" target="_blank">
  Example Link
</a>

a[href^="http://"] {
	font-style: italic;
}

✔ http:// 로 시작하는 애들만 선택해주세요!

02-4. [attr$=value]

• 부분적으로 문자열이 일치하더라도 선택이 되게끔 할 수 있음
• ""값으로 끝나는 애들로 선택해주세요!

<a href="http://example.com" target="_blank">
  Example Link
</a>

a[href$=".com"] {
	color :  silver;
}

✔ .com 으로 끝나는 애들만 선택해주세요!

02-5. [attr*=value]

• 적어도 하나. 위치 무관
• ""값이 적어도 하나가 있는 애들로 선택해주세요!

<a href="http://example.com" target="_blank">
  Example Link
</a>

a[href*="example"] {
	color :  sienna;
}

✔ example 을 가지고 있는 애들만 선택해주세요!

---

03. 가상 클래스 선택자 (Pseudo-Class Selector)

03-1. first-child / last-child / nth-child

• first-child : 첫번째 자식 요소 선택

• last-child : 마지막 자식 요소 선택

• nth-child(n) : n번째 자식 요소 선택

03-2. first-of-type / last-of-type / nth-of-type

• first-of-type : 어떤 특정 타입들만 모아서 센 다음, 그 그룹에서의 첫번째 자식 요소 선택

• last-of-type : 어떤 특정 타입들만 모아서 센 다음, 그 그룹에서의 마지막 자식 요소 선택

• nth-of-type(n) : 어떤 특정 타입들만 모아서 센 다음, 그 그룹에서의 n번째 자식 요소 선택

⭐️ 주의사항

<h2>Movie List</h2>
<section>
	<div>Toy story</div>
    <p>Zootopia</p>
    <p>Inside Out</p>
    <div>Coco</div>
    <p>Finding Nemo</p>
</section>

p:first-child {
	color: red;
    }

📌 section 이라는 부모요소 안에서의 첫번째 자식 요소가 p가 아니기 때문에 선택되지 않음
📌 p:first-of-type 을 사용해야 Zootopia가 선택되어 적용됨

03-3. :not()

• selector1:not(selector2) {}
  : selector1 중에서 selector2 를 제외한 나머지

<form>
	<input type="text" placeholder="name">
    <input type="email" placeholder="email">
    <input class="pw" type="password" placeholder="password">
    <input type="submit">
</form>

input:not(.pw) {
	background-color : hotpink;
    }

✔ input 중에서 pw 클래스 이름을 가진 요소를 제외하고 배경색을 적용해라!

input:not([type=email]) {
	background-color : hotpink;
    }

✔ input 중에서 타입이 email인 요소를 제외하고 배경색을 적용해라!

03-4. hover / active / focus

• hover : 마우스(포인터)가 올라가 있는 동안의 상태

input[type=button]:hover {
	backgroung-color: skyblue;
    border: none;
    cusor : pointer;
}

• active : 마우스(포인터)가 클릭하는 동안의 상태
  다른 모든 링크 규칙들볻다 뒤에 배치하기!

input[type=button]:active {
	backgroung-color: red;
}

• focus : 특정 요소가 포커싱 되었을 때. 대화형 콘텐츠에서 사용 가능

input[type=text]:focus {
	backgroung-color: blue;
    color : white;
}

03-5. enabled / disabled / checked

<div>
	<input type="text" placeholder="1">
    <input type="text" placeholder="2">
    <input type="text" placeholder="3" disabled>
</div>

<div>
	<input type="radio" name="my-input" id="yes">
    <label for="yes">Yes</label>
    
    <input type="radio" name="my-input" id="no">
    <label for="yes">no</label>    
</div>

<div>
	<input type="checkbox" name="check-me" id="check-me">
    <label for="check-me">Check me!</label>
</div>

• enabled : disable을 제외하고 활성화되어있는 애들에게만 적용됨

input[type=text]:enabled {
	background-color: skyblue;
}

• disabled : 비활성화되어있는 애들에게만 적용됨

input[type=text]:disabled {
	background-color: silver;
}

• checked : 체크된 애들에게만 적용됨

input[type=text]:checked {
	outline: 3px solid red;
}

---

04. 가상 요소 선택자 (Pseudo-Element Selector)

• 실제로 존재하지 않는 요소나 범위를 만들어서 스타일을 적용하는 것
• 사용할 때 content라는 요소를 추가해야함

<div class="movie">Toy Story</div>
<div class="movie favorite">Zootopia</div>
<div class="movie">Inside Out</div>
<div class="movie favorite">Coco</div>
<div class="movie">Finding Nemo</div>

• before after : 앞/뒤를 꾸며줌

.favorite::before {
	content: 'Best';
}

✔ favorite 이라는 클래스 네임을 가진 것들 앞에 Best가 붙음!