Selectors and Specificity

CSS의 Selectors and Specificity는 요소에 스타일을 적용하기 위한 핵심 개념이다. 각 선택자를 이해하고 우선순위를 계산하는 것은 효율적이고 유지보수 가능한 CSS를 작성하는 데 필수적이다. 

---

1. CSS 선택자 (Selectors)

CSS 선택자는 HTML 요소를 타겟팅하여 스타일을 적용하는 방법이다.

기본 선택자

1. 유형 선택자 (Type Selector) : HTML 태그 이름으로 요소를 선택한다.

   p {
     color: blue;
   }

2. 클래스 선택자 (Class Selector) : class 속성을 기반으로 선택한다.

   .button {
     background-color: red;
   }

3. ID 선택자 (ID Selector) : id 속성을 기반으로 선택한다.

   #header {
     font-size: 24px;
   }

4. 전체 선택자 (Universal Selector) : 모든 요소를 선택한다.

   * {
     margin: 0;
     padding: 0;
   }

 

 

결합 선택자

1. 후손 선택자 (Descendant Selector) : 특정 요소의 후손 요소를 선택한다.

   div p {
     color: green;
   }

2. 자식 선택자 (Child Selector) : 특정 요소의 직계 자식만 선택한다.

   div > p {
     color: red;
   }

3. 인접 형제 선택자 (Adjacent Sibling Selector) : 특정 요소 바로 다음 형제 요소를 선택한다.

   h1 + p {
     margin-top: 10px;
   }

4. 일반 형제 선택자 (General Sibling Selector) : 특정 요소 뒤에 오는 모든 형제 요소를 선택한다.

   h1 ~ p {
     color: gray;
   }

 

속성 선택자 (Attribute Selector)

HTML 요소의 속성 값을 기반으로 선택합니다.

1. 속성 존재 확인:

   [title] {
     color: blue;
   }

2. 속성 값 일치:

   [type="text"] {
     border: 1px solid gray;
   }

3. 부분적 속성 값 확인:
   • 시작: [attr^="value"]
   • 끝: [attr$="value"]
   • 포함: [attr*="value"]

 

의사 클래스와 의사 요소

1. 의사 클래스 (Pseudo-class) : 특정 상태에 따라 스타일을 적용.

   a:hover {
     text-decoration: underline;
   }

2. 의사 요소 (Pseudo-element) : 요소의 특정 부분을 스타일링.

   p::first-line {
     font-weight: bold;
   }

---

2. Specificity (우선순위)

CSS에서 특정 스타일이 적용될지 여부는 선택자의 우선순위(Specificity)에 따라 결정된다.

Specificity 계산 규칙

1. 구조: inline styles > ID > Class/Pseudo-class/Attribute > Type/Pseudo-element
2. 점수 시스템:
   • Inline Style: 1000점
   • ID 선택자: 100점
   • Class, Attribute, Pseudo-class: 10점
   • Type, Pseudo-element: 1점

     /* 점수: 101 */
     div#main .highlight {
       color: blue;
     }

3. !important
   • 특정 스타일을 강제로 적용.
   • 우선순위와 관계없이 최종적으로 적용되지만, 다른 !important 규칙 간에는 Specificity 계산이 적용.

     p {
       color: red !important;
     }

     
     
     
4. Source Order (출처 순서)
   • 동일한 Specificity의 스타일이 충돌하면, 나중에 작성된 스타일이 적용.

---

4. Best Practices

1. CSS 파일의 구조화 : BEM(Block Element Modifier) 등의 네이밍 규칙을 사용해 선택자의 혼란을 줄인다.
2. 우선순위 최소화 : ID 선택자와 !important 사용을 피하고, 클래스 선택자를 주로 사용.
3. Cascade 활용 : 기본 스타일은 일반적인 선택자를 사용하고, 특수한 스타일에만 높은 Specificity를 부여.