CSS 4 - Selectors

💻1. Selector 종류

• Type | Class | ID

1. Type Selector

• Tag selector

h1 {
  /** css style **/
}

2. Class Selector

• 여러 요소에 동일한 스타일을 동시에 주고 싶을 때 class 사용
• 한 요소는 여러 개의 class를 가질 수 있음

.box {
  /** css style **/
}

.box-0.box-1 {
  /** box-0이자 box-1인 요소**/
  /** css style **/
}

3. ID Selector

• 식별자. 즉, ID는 단 하나만 존재해야 함

#box {
  /** css style **/
}

선택자 표현하기

<div class="box" id="active"></div>
-> .box#active or #active.box

---

💻2. Child, Descendant & Sibling Combinators

1. 자식, 자손, 형제

자식과 자손은 다른 개념. 같은 레벨에 있는 애들은 형제들

2. Child Combinator

• parent > child

3. Descendant Combinator

• parent descendants

4. Sibling Combinators

• parent + sibling: 기준이 되는 요소 다음에 오는 형제 요소의 스타일 줄 때 사용
• parent ~ sibling: 기준이 되는 요소 다음에 오는 모든 형제 요소의 스타일 줄 때 사용

---

💻3. Structural Pseudo-classes

• 구조적 가상 클래스 선택자
• Pseudo-classes?
  어떤 상태나 조건에 만족했을 때 사용가능한 클래스

1. element:first-child
2. element:last-child
3. element:nth-child()

• nth-child(2n): 짝수 | nth-child(2n-1): 홀수

---

💻4. User Action Pseudo-classes

• 동적 가상 클래스 선택자

1. element:hover
   마우스를 갖다 댔을 때 작용
2. element:focus
   클릭됐을 때 작용
3. element:active
   클릭할 때 작용

---

💻5. Selector 우선 순위

• CSS는 나중에 선언된 녀석들이 적용됨 (덮어씀)
• 우선 순위를 정할 때 점수가 존재함. 마치 라잌 올림픽 마냥..

1. 우선 순위

• 1위: ID
• 2위: Class | Pseudo-class
• 3위: Type

2. 점수 합산 방식

• #gng.tab-nav: 금1 은1
• header.main-header: 은1 동1
• #gnb.tab-nav ul: 금1 은1 동1
• #gnb.tab-nav ul:last-child: 금1 은2 동1

3. Rule Breakers

• inline-style: html 태그 안에 style 적용하는 법. 가장 강력함❗
• !important 사용: inline-style도 이기는 넘임. 정말 중요한 스타일이 아닌 이상 사용하지 말자😬

---