1. 선택자란?

HTML 요소를 선택해 style을 정의하는 것을 말한다.

1. 기본선택자

📌 전체 선택자 (*)

• Universal Selector
• HTML 문서 내의 모든 요소를 선택한다. (head 요소도 포함)

* {
  margin: 0;
  padding: 0;
}

📌 타입 선택자

• Type Selector
• 특정 태그명을 가지는 요소를 선택한다.

span {
  color: #fff;
}

📌 클래스 선택자 (.)

• Class Selector
• class attribute 값과 일치하는 요소를 선택한다.

.container {
  padding: 20px;
}

📌 아이디 선택자 (#)

• Id Selector

#heading {
  background-color: pink;
}

⚠️ Class 선택자와 Id 선택자의 차이? ? ?
클래스는 중복 사용이 가능하여 한 페이지 내에 동일한 클래스명이 존재할 수 있지만,
아이디는 중복 사용이 불가능하고 1개의 아이디는 페이지에서 1번만 사용가능하다.
따라서! 여러 스타일을 적용할 때에는 클래스(class)를 사용하고, 한가지만 적용할 때에는 아이디(id)를 사용

2. 그룹 선택자

• 여러 선택자를 쉼표(,)로 구분하여 선택한다.

h1,
p {
  margin: 0;
}

3. 복합 선택자

📌 자손 선택자 ( )

• 자식과 자손을 모두 선택할 수 있다.
• 공백을 사용하여 선택한다.

    <section>
      <h1>Hello</h1>
      <h2>Hello</h2>
      <p>world</p>
    </section>
    
    <style>
      section p {
        color: pink;
      }
    </style>

📌 자식 선택자 (>)

• 바로 아래 자식의 요소를 선택한다.

    <h1>Hello World</h1>
    <div>
      <p>Hello World #1</p>
      <p>Hello World #2</p>
      <span><p>Hello World #3</p></span>
    </div>
    <p>Hello World #4</p>
    
    <style>
      div > p {
        color: pink;
      }
   </style>

⚠️ 자식 선택자는 자손 선택자와 달리 바로 하위에 속하는 요소만 선택한다!
자손 선택자는 n 하위에 속하는 요소를 모두 선택할 수 있다는 점에 차이점을 가진다.

📌 일반 형제 선택자 (~)

• 뒤에 있는 모든 같은 요소를 동시에 선택한다.

    <h1>과일</h1>
    <h2>딸기</h2>
    <h2>복숭아</h2>
    <h2>귤</h2>
    
    <style>
      h1 ~ h2 {
        color: pink;
      }
    </style>

💡 A ~ B
A 뒤에 있는 모든 B를 선택자로 지정한다.

📌 인접 형제 선택자 (+)

• 바로 뒤에 있는 요소 1개를 선택한다.

    <h1>과일</h1>
    <h2>딸기</h2>
    <h2>복숭아</h2>
    <h2>귤</h2>
    
    <style>
      h1 + h2 {
        color: pink;
      }
    </style>

4. 속성 선택자

📌 [속성이름]

• 해당 속성을 가진 요소 모두 선택한다.

      [title] {
        color: red;
      }

📌 [속성이름~="속성값"] 선택자

• 해당 속성을 갖고, 그 값 중에 속성값이 포함되는 요소를 선택한다. (공백 OK)

    <div class="btn">선택됨!</div>
    <div class="btn reset">선택됨!</div>
    <div class="reset btn">선택됨!</div>
    <div class="btn-negative">선택안됨ㅠ</div>
    
    <style>
      [class~="btn"] {
        background-color: pink;
      }
    </style>
      }

📌 [속성이름|="속성값"] 선택자

• 속성값만 포함하거나, 속성값으로 시작하고 하이픈 - 기호가 있는 요소 선택한다

    <div class="btn">선택됨!</div>
    <div class="btn reset">선택됨!</div>
    <div class="reset btn">선택안됨ㅠ</div>
    <div class="btn-negative">선택됨!</div>
    
    <style>
      [class|="btn"] {
        background-color: pink;
      }
    </style>
      }

⚠️ [속성이름~="속성값"] 과 [속성이름|="속성값"] 차이!
전자는 속성값이 하나 이상 포함하거나 속성값이 공백을 통해 분리되어 있어야한다. 후자는 속성값이 정확히 "속성값"으로 시작하거나 "속성값-"을 포함하는 요소들을 선택한다.

📌 [속성이름^="속성값"] 선택자

• 속성값으로 시작하는 요소를 선택한다.

    <div class="btn">선택됨!</div>
    <div class="btn reset">선택됨!</div>
    <div class="reset btn">선택안됨ㅠ</div>
    <div class="btn-negative">선택됨!</div>
    
    <style>
      [class^="btn"] {
        background-color: pink;
      }
    </style>
      }

📌 [속성이름$="속성값"] 선택자

• 속성값으로 끝나는 요소 선택한다.

    <div class="btn negative"></div>
    <div class="btn-negative"></div>
    
     <style>
     [class$="negative"] {
       background-color: pink;
     }
    </style>

📌 [속성이름*="속성값"] 선택자

• 속성값을 포함하는 요소를 모두 선택한다.

    <div class="btn a"></div>
    <div class="btnna"></div>
    <div class="a-btn"></div>
    
    <style>
     [class*="btn"] {
        background-color: pink;
      }
    </style>