CSS의 구체성 w. html

.card__button--primary와 .card__button 중에서 누가 우선 적용되느냐(누가 "높냐")는 CSS의 "구체성"에 따라 달라져.
구체성이 높다 → 더 우선적으로 적용된다 (강한 스타일). 이름이 길다.
구체성이 낮다 → 덮어씌워질 가능성이 크다 (약한 스타일).

---

CSS 구체성의 기본 규칙

1. 인라인 스타일: <div style="..."> → 가장 우선 적용됨
2. 아이디 선택자: #id-name → 두 번째로 강함
3. 클래스, 속성 선택자: .class-name, [attr] → 세 번째
4. 요소 선택자: div, h1, button → 가장 낮음

---

.card__button과 .card__button--primary의 구체성 비교

1. .card__button:

   • 구체성 점수: 0, 0, 1 (클래스 선택자 1개)
   • 카드의 모든 버튼에 적용되는 기본 스타일.

2. .card__button--primary:

   • 구체성 점수: 0, 0, 1 (클래스 선택자 1개)
   • .card__button보다 더 세부적인 스타일(수정자)을 적용하기 위한 선택자.

둘 다 구체성 점수는 동일하지만, HTML에서 뒤에 선언된 스타일이 우선 적용돼.
즉, CSS에서 .card__button이 먼저 선언되고, .card__button--primary가 나중에 선언되었다면 .card__button--primary가 우선 적용돼.

---

코드 예시

HTML

<button class="card__button card__button--primary">버튼</button>

CSS

/* 기본 버튼 스타일 */
.card__button {
  background-color: gray;
  color: white;
}

/* 수정자 버튼 스타일 */
.card__button--primary {
  background-color: blue;
}

결과 😊

• .card__button은 기본적으로 회색 배경을 설정하지만,
• .card__button--primary는 파란색 배경으로 덮어써.

수정자 클래스(--primary)는 기본 클래스(.card__button) 위에 추가로 스타일을 덧씌우지롱.

---

정리

1. 구체성은 CSS 규칙의 우선순위를 결정하는 점수 체계로, 선택자가 더 구체적일수록 높은 우선순위를 가짐.
2. 구체성 점수 체계: 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 클래스 선택자 > 태그 선택자.
3. 동일한 구체성이라면, 나중에 선언된 스타일이 우선 적용됨.