CSS 선택자

docs.scrimba.com

페이지에 가득한 요소들과 적용하려는 스타일 세트가 있지만, 색상이나 폰트는 어떤 요소에 속하는지 말할 수 있을 때까지 쓸모가 없습니다. 선택자는 올바른 요소들을 가리키는 방법입니다: 이 단락, 모든 버튼, nav 안의 링크들만. 선택자에 익숙해지면 이미 요소에 도달하는 방법을 알고 있기 때문에 CSS의 나머지는 무엇을 변경할지 선택하는 문제가 됩니다.

유형, 클래스, id 선택자

CSS 규칙에는 두 부분이 있습니다: 어떤 요소를 스타일링할지 선택하는 **선택자**와 어떻게 할지 말하는 선언 블록. 가장 간단한 선택자는 요소의 이름이며, 유형 선택자라고 불립니다. p를 쓰면 페이지의 모든 단락이 스타일링됩니다.

이는 종종 너무 광범위합니다. 일반적으로 모든 단락이 같은 모양이길 원하지 않습니다. 그래서 HTML class 속성을 사용하여 요소에 클래스라는 레이블을 지정하고, CSS에서 앞에 점을 붙여서 그 레이블을 대상으로 합니다. 클래스를 이름표처럼 생각하세요: 그룹처럼 취급하려는 모든 요소에 같은 태그를 붙인 다음 한 번에 스타일링합니다.

요소를 대상으로 하는 세 가지 기본 방법이 있습니다. **유형 선택자**는 태그 이름으로 일치합니다(p는 모든 단락과 일치). 클래스 선택자는 class 속성으로 일치하며 앞에 점을 붙여 작성합니다(.button). id 선택자는 id 속성으로 일치하며 앞에 해시를 붙여 작성합니다(#header).

클래스를 기본 스타일링 훅으로 사용하세요. 클래스는 원하는 만큼 많은 요소에 들어갈 수 있고, 요소는 여러 클래스를 가질 수 있으므로 클래스는 재사용 가능한 그룹을 설명합니다: .card를 가진 모든 것은 공통된 모양을 공유합니다. 유형 선택자는 광범위한 기본 스타일링(예: body 폰트 설정)에 유용하지만, 그 종류의 모든 요소에 영향을 주기 때문에 둔합니다. id는 페이지에서 유일해야 하므로 id를 통한 스타일링은 규칙을 단일 요소에 고정하고, 명시도 아래에서 볼 수 있듯이 그들은 재정의하기 어렵게 만드는 추가 가중치를 전달합니다.

세 가지 선택자 유형이 기본을 다루며, 그들 간의 구별은 부분적으로는 일치에 관한 것이고 부분적으로는 가중치에 관한 것입니다. 유형 선택자(태그 또는 요소 선택자라고도 함)는 요소 이름으로 일치합니다: p, section, input. 클래스 선택자는 .card로 작성되며, class 속성이 해당 토큰을 포함하는 모든 요소와 일치하고, 속성은 공백으로 구분되므로 하나의 요소가 많은 클래스를 보유할 수 있습니다. id 선택자는 #header로 작성되며, id 속성이 해당 값과 같은 단일 요소와 일치합니다; id는 문서 내에서 고유해야 합니다.

실무 규칙은 거의 전적으로 클래스를 통해 스타일링하는 것입니다. 클래스는 재사용 가능하면서도 명시도가 낮은 유일한 방식입니다(브라우저가 충돌을 해결하는 데 사용하는 우선순위 점수는 이 장의 끝에서 다룹니다). 이는 스타일을 평탄하고 재정의 가능하게 유지합니다. 유형 선택자는 작은 기본 규칙 세트에 속합니다: 리셋, body의 기본 폰트, a 또는 input의 합리적인 기본값. id는 JavaScript 훅 및 프래그먼트 링크 대상(URL의 #pricing`)으로 정당하지만, 스타일링 훅으로는 함정입니다: 고유하므로 그룹을 설명할 수 없고, 높은 명시도는 나중에 오는 클래스 규칙이 에스컬레이션 없이 재정의할 수 없다는 의미입니다. 클래스로 스타일링하고, 앵커와 스크립트를 위해 id를 예약하세요.

<button class="btn-primary">가입하기</button>
<button class="btn-primary">지금 구매</button>

/* 유형 선택자: 페이지의 모든 버튼 */
button {
  font-family: inherit;
}

/* 클래스 선택자: btn-primary로 태그된 요소만 */
.btn-primary {
  background: rebeccapurple;
  color: white;
}

두 버튼 모두 하나의 규칙에서 .btn-primary 스타일링을 픽업합니다. 클래스를 공유하기 때문입니다. 이 재사용이 클래스가 당신이 도달하는 도구인 전체 이유입니다. 이는 CSS가 작동하는 방식에서 직접 구축되며, 여기서 각 규칙은 선택자를 선언 세트와 쌍을 이룹니다.

Juno유형, 클래스, id 선택자p와 같은 유형 선택자는 그 종류의 모든 요소에 영향을 주며, 이는 보통 당신이 원하는 것보다 많습니다. 클래스는 당신이 신경 쓰는 요소에 붙이는 이름표이고 .btn-primary처럼 점으로 스타일링합니다. 거의 모든 것에 클래스를 사용하면 크게 잘못되지 않습니다.

Juno유형, 클래스, id 선택자 클래스가 당신의 기본 훅입니다: 재사용 가능하고, 하나의 요소가 여러 개를 입을 수 있습니다. 넓은 기본 스타일링 예를 들어 body 폰트의 경우 유형 선택자를 유지하고, id를 스타일링하기에 너무 구체적이고 단일 용도로 취급하세요. 나중에 문제를 피하고 먼저 클래스를 선택하세요.

Juno유형, 클래스, id 선택자 클래스는 재사용 가능하면서도 낮은 명시도인 유일한 기본 선택자이며, 이것이 정확히 당신이 스타일링을 통해 진행하고 규칙을 평탄하게 유지하는 이유입니다. 유형 선택자는 작은 기본 계층을 구성할 자격이 있고, id는 스타일링이 아닌 스크립트와 링크 앵커에 속합니다. id 규칙이 나중에 오는 클래스에 의해 재정의되기를 거부하는 날, 당신은 이들을 유지한 것을 기뻐할 것입니다.

결합자: 관계로 선택하기

때로는 다른 요소 안에 앉아 있을 때만 요소를 스타일링하고 싶습니다. 네비게이션의 링크는 단락의 링크와 다르게 보여야 하지만, 둘 다 <a> 요소입니다. 당신은 **결합자**로 그 관계를 설명합니다: 두 선택자를 공백으로 나란히 놓으면 CSS는 "두 번째 것이지만, 첫 번째 것 안에만"으로 읽습니다.

따라서 .nav a는 "클래스 nav를 가진 요소 안의 모든 링크"를 의미합니다. 공백이 실제 작업을 하고 있습니다. 장식이 아니라, 안을 들여다보라는 지시입니다.

**결합자**는 두 선택자를 연결하고 HTML에서 요소가 어떻게 관련되어 있는지에 따라 일치합니다. 가장 일반적인 것은 하강 결합자이며, 공백으로 작성됩니다: .nav a는 .nav 안의 어디든지 있는 모든 <a>와 일치하며, 얼마나 깊이 중첩되어 있든 상관없습니다.

직접 자식만 원하고 더 깊은 후손은 원하지 않을 때 자식 결합자 >를 사용하세요. .menu > li는 .menu의 직접 자식인 목록 항목과 일치하며, 중첩된 목록을 건너뜁니다. 또한 부모를 공유하는 요소에 대한 두 개의 형제 결합자가 있습니다: 인접 형제 +는 다른 요소 직후에 오는 요소와 일치합니다(h2 + p는 제목 직후의 단락을 스타일링합니다), 일반 형제 ~는 뒤따르는 모든 형제와 일치합니다. 하강과 자식이 대부분의 실제 작업을 다룹니다; 형제 결합자는 간격 및 폼 패턴에 유용합니다.

**결합자**는 두 선택자 사이의 문자로 충족해야 하는 구조적 관계를 정의합니다. 하강 결합자(공백)는 오른쪽 선택자가 왼쪽 안에 어느 깊이든 중첩되어 있을 때 일치합니다. 자식 결합자(>)는 직접 자식만으로 제한합니다: .menu > li는 중첩된 .submenu에 묻혀 있는 목록 항목을 무시합니다. 인접 형제 결합자(+)는 같은 부모를 가진 다른 요소 바로 뒤에 오는 요소와 일치하고, 일반 형제 결합자(~)는 같은 부모를 가진 뒤따르는 모든 형제와 일치합니다.

프로덕션에서 유지할 가치가 있는 두 가지가 있습니다. 먼저, 복합 선택자는 브라우저의 매처에서 오른쪽에서 왼쪽으로 읽습니다: .nav a의 경우 엔진은 먼저 <a> 요소를 찾은 다음 각각이 .nav 상위를 가지는지 확인하기 위해 올라갑니다. 이것이 매우 긴 하강 체인이 더 비용이 들고 긴밀한 .nav > a가 느슨한 .nav a보다 저렴할 수 있는 이유입니다. 둘째, 하강 선택자는 CSS를 마크업 구조에 결합합니다: .card .title은 누군가 제목을 다른 요소로 감싸는 순간 깨집니다. 요소에 대한 직접 클래스(.card-title)를 선호하면 스타일을 마크업 변경에 복원력 있게 유지하며, 관계가 실제로 표현하려는 것일 때 결합자로 떨어집니다.

/* 하강: nav 안의 모든 링크 */
.nav a {
  text-decoration: none;
}

/* 자식: .menu의 직접 자식인 목록 항목만 */
.menu > li {
  display: inline-block;
}

첫 번째 규칙은 nav 안에 중첩된 모든 링크에 도달하고, 두 번째는 메뉴의 최상위 항목만 도달하고 중첩된 목록은 그대로 둡니다. 그들 사이에서 선택하는 것은 규칙이 얼마나 깊이 이동하길 원하는지 선택하는 것입니다.

Juno결합자 두 선택자 사이의 공백은 "안에"를 의미합니다: .nav a는 nav 안에 앉아 있는 링크를 스타일링합니다. 그 공백은 모양을 위한 간격이 아닌 지시이므로 실수로 떨어뜨리지 마세요. 이 패턴 하나가 매일의 스타일링의 많은 부분을 다룹니다.

Juno결합자 공백은 하강 결합자이고 모든 깊이에서 일치합니다; >는 직접 자식만으로 좁힙니다. 형제 +와 ~은 그 앞에 오는 것에 따라 요소를 스타일링해야 할 때 있습니다. 하강과 자식이 당신이 매일 작성하는 대부분을 처리할 것입니다.

Juno결합자 결합자는 유용하고, CSS를 HTML 구조에 결합하므로 .card .title처럼 긴 하강 체인은 리팩터링 한 번 떨어져 있습니다. 요소에 대한 직접 클래스를 선호하고 관계가 실제로 표현하려는 것일 때 결합자로 떨어지세요. 일치도 오른쪽에서 왼쪽으로 실행되므로 긴밀한 >는 종종 느슨한 하강 체인을 이깁니다.

의사 클래스: 상태로 스타일링하기

요소는 다른 상태에 있을 수 있습니다. 링크는 정적이거나 마우스가 위에 떠있을 수 있습니다. **의사 클래스**는 요소의 상태에 따라 스타일링하도록 하며, 선택자 뒤에 단일 콜론으로 작성됩니다.

먼저 사용할 것은 :hover입니다. .btn-primary:hover를 쓰면 포인터가 버튼 위에 있을 때만 스타일이 적용되며, 이것이 버튼과 링크가 당신이 그들을 가리킬 때 작은 시각적 반응을 주는 방법입니다.

**의사 클래스**는 특정 상태 또는 위치에서 요소를 대상으로 하며, 단일 콜론으로 작성됩니다: 포인터가 위에 있을 때 :hover, 키보드 입력을 위해 선택되었을 때 :focus, 부모 안의 첫 번째 요소일 때 :first-child.

:focus는 접근성 문제이므로 주의를 기울일 가치가 있습니다. 키보드로 탐색하는 사람들은 하나의 컨트롤에서 다음으로 탭하고, :focus 스타일은 그들이 어디에 있는지 알려주는 유일한 신호입니다. 초점 윤곽을 제거하지 말고 눈에 띄는 대안으로 교체하세요. :nth-child()처럼 구조적 의사 클래스도 있으며, 괄호 안에 패턴을 취합니다: :nth-child(odd)는 모든 다른 요소와 일치하며, 테이블 행을 줄무늬로 만드는 데 유용합니다. :first-child와 :last-child는 추가 클래스가 필요 없이 그룹의 끝을 잡습니다.

의사 클래스(단일 콜론 뒤의 키워드)는 당신이 추가 마크업을 하지 않고도 주어진 상태 또는 구조적 위치에 있는 요소와 일치합니다. 상태 의사 클래스는 :hover, :active, :focus를 포함합니다; 구조적 클래스는 :first-child, :last-child, 그리고 매개변수화된 :nth-child()를 포함하며, 그 인수는 an+b 패턴입니다(:nth-child(2n)은 모든 두 번째 요소, :nth-child(3n+1)은 각 세 개 그룹의 첫 번째).

두 가지 프로덕션 참고. :focus는 키보드 접근성을 위해 협상의 여지가 없습니다: 키보드 사용자는 초점 고리에 의존하여 그들의 위치를 알기 때문에, 눈에 띄는 교체 없이 윤곽을 제거하면 인터페이스를 키보드 사용자가 사용할 수 없게 만듭니다. :focus-visible을 선호하세요. 이는 키보드 상호작용을 위해 고리를 보여주지만 마우스 클릭에서는 억제하므로, 깔끔한 포인터 경험과 접근 가능한 키보드 경험을 모두 얻습니다. 구조적 측면에서, :nth-child(n)은 유형에 상관없이 모든 형제를 세는 반면 :nth-of-type(n)은 같은 요소의 형제만 세므로, 이는 작동하는 규칙과 목록에 떠도는 요소가 있을 때 자동으로 잘못 세는 규칙의 차이입니다.

.btn-primary:hover {
  background: purple;
}

/* 키보드 사용자는 눈에 띄는 초점 표시기가 필요합니다 */
.btn-primary:focus-visible {
  outline: 2px solid rebeccapurple;
  outline-offset: 2px;
}

첫 번째 규칙은 포인터가 버튼 위에 있을 때 발동합니다; 두 번째는 버튼이 키보드로 선택되었을 때 명확한 고리를 그리며, 이것이 마우스 없이 페이지를 사용 가능하게 유지하는 것입니다. 색상 및 윤곽 선택은 여기서 CSS가 작동하는 방식과 모든 속성에 설정하는 값과 연결됩니다.

Juno의사 클래스 의사 클래스는 특정 상태에서 요소를 스타일링하며 한 개의 콜론으로 작성됩니다. 예를 들어 :hover는 포인터가 위에 있을 때입니다. 이것이 버튼의 호버 효과가 나오는 곳입니다. 선택자에 바로 붙이며, 사이에 공백이 없습니다.

Juno의사 클래스 의사 클래스는 상태와 위치와 일치합니다: :hover, :focus, :nth-child(), :first-child. :focus를 접근성 요구사항으로 취급하세요. 키보드 사용자가 자신이 어디에 있는지 볼 필요가 있으므로, 눈에 띄는 교체 없이 윤곽을 제거하지 마세요. 이 습관이 모든 사람을 위해 페이지를 사용 가능하게 유지합니다.

Juno의사 클래스 맨 :focus 대신 :focus-visible을 선호하므로 고리는 키보드 사용자에 표시되지만 마우스 클릭에서는 표시되지 않으며, 절대로 초점 표시기를 제거하는 인터페이스를 배송하지 마세요. :nth-child 대 :nth-of-type 함정을 감시하세요: 하나는 모든 형제를 세고, 다른 하나는 같은 유형의 형제만 세고, 잘못된 선택은 목록에 떠도는 요소가 나타나는 순간 잘못 세집니다. 이것은 괜찮아 보이다가 그렇지 않을 때까지 그런 버그입니다.

의사 요소: 요소의 일부 스타일링

의사 클래스는 특정 상태에서 전체 요소를 스타일링합니다. **의사 요소**는 다릅니다: 이는 요소의 일부를 스타일링하거나, 당신의 HTML에 전혀 없는 작은 콘텐츠 조각을 추가하도록 합니다.

먼저 만날 두 개는 ::before와 ::after입니다. 이들은 요소의 시작이나 끝에 콘텐츠를 삽입하고, content 속성으로 삽입할 내용을 말합니다. 두 개의 콜론을 주목하세요: 이 이중 콜론은 CSS가 의사 요소를 의사 클래스와 구별하는 방법입니다.

**의사 요소**는 전체 요소가 아닌 요소의 특정 부분을 스타일링하며, 단일 콜론 의사 클래스와 구별하기 위해 이중 콜론(::)을 사용합니다. 가장 사용된 것은 ::before와 ::after이며, 이는 요소의 매우 시작이나 끝에 생성된 자식을 만듭니다. 이들은 렌더링할 content 속성을 요구하며, 비어 있어도 (content: ""), 그 생성된 콘텐츠는 장식적입니다: 스크린 리더가 이를 건너뛸 수 있으므로 절대 의미를 거기에 놓지 마세요.

또 다른 일반적인 것은 ::placeholder로, 빈 입력 안의 흐린 힌트 텍스트를 스타일링합니다. 의사 요소는 요소의 슬라이스를 대상으로 하기 때문에, 작은 시각적 조각(레이블 앞의 아이콘, 제목 뒤의 장식선)을 마크업에 추가 태그를 추가하지 않고 구축할 수 있습니다.

**의사 요소**는 자신의 태그가 없는 요소의 일부를 노출하며, 이중 콜론 키워드를 통해 스타일링됩니다. ::before와 ::after는 요소의 첫 번째 또는 마지막 자식으로 인라인 박스를 생성합니다; content가 설정될 때만 렌더링됩니다(순수 장식 박스를 위해 content: ""를 사용하세요), 그 생성된 콘텐츠는 접근성 트리 밖에 앉으므로 장식적으로 유지되어야 하고 절대 사용자가 필요한 의미를 전달하지 않습니다. ::placeholder는 입력의 힌트 텍스트를 대상으로 하고, ::selection은 강조된 텍스트를 대상으로 하고, ::first-line과 ::first-letter는 타이포그래피 슬라이스를 대상으로 합니다.

단일 대 이중 콜론 이야기는 알 가치가 있습니다. 현대 의사 요소는 :: (이중 콜론)을 사용하여 의사 클래스와 구별하며, 이것은 CSS3에서 소개된 구별입니다. 네 개의 원본 의사 요소(:before, :after, :first-line, :first-letter)의 경우, 단일 콜론 형식은 레거시 이유로 여전히 파싱하지만, 이중 콜론 형식을 작성하세요; 단일 콜론은 호환성 유물이지, 새 코드에 가져갈 스타일이 아닙니다. 프로덕션에서 ::before와 ::after는 많은 조용한 작업을 합니다: 도구팁, 사용자 정의 목록 마커, 구형 레이아웃의 clearfix, HTML을 어지럽히지 않을 장식 버팀목.

/* 모든 nav 링크 뒤에 장식 화살표 추가 */
.nav a::after {
  content: " →";
  color: rebeccapurple;
}

/* 검색 상자 안의 힌트 텍스트 스타일링 */
.search-input::placeholder {
  color: grey;
  font-style: italic;
}

::after 규칙은 HTML이 아닌 스타일링에만 존재하는 화살표를 삽입하고, ::placeholder는 입력 안을 도달하여 브라우저가 당신을 위해 그리는 텍스트를 스타일링합니다. 둘 다 일반 선택자로 달리 도달할 수 없는 것을 스타일링합니다. 힌트 텍스트와 레이블을 스타일링하려면, 타이포그래피 장이 텍스트 측면에서 더 깊이 있습니다.

Juno의사 요소 의사 요소는 요소의 일부를 스타일링하거나 작은 콘텐츠를 추가하며, ::before와 ::after처럼 두 개의 콜론을 사용합니다. 이 둘은 표시되려면 content 속성이 필요합니다. 이중 콜론은 의사 요소를 의사 클래스와 구별하는 빠른 방법입니다.

Juno의사 요소 의사 요소는 이중 콜론을 사용하고 요소의 슬라이스를 스타일링합니다: ::before, ::after, ::placeholder. 첫 두 개는 content 값이 필요하며, 비어 있는 ""도, 그 콘텐츠는 장식적이므로 실제 의미를 HTML에 유지하세요. 이들은 장식만을 위해 태그를 추가하지 않아도 됩니다.

Juno의사 요소 의사 요소를 두 개의 콜론으로 작성하세요; 단일 콜론 형식은 4개의 원본 레거시 사소한 것으로만 생존합니다. ::before와 ::after의 콘텐츠는 접근성 트리 밖에 있으므로 장식적으로 유지되고 사용자가 읽어야 할 것을 절대 전달하지 않습니다. 이들은 조용히 도구팁, 사용자 정의 마커, 그리고 마크업을 부풀리지 않을 벗을 처리합니다.

명시도: 어떤 규칙이 이기는가

곧 두 규칙이 같은 요소를 다른 방식으로 스타일링하려고 시도할 것입니다. 하나는 텍스트가 파란색이라고 말하고, 다른 하나는 빨간색입니다. 브라우저가 하나를 선택해야 하고, 결정하는 방식을 **명시도**라고 합니다: 더 구체적인 선택자가 이깁니다.

단축 버전은 강도의 순서입니다. id 선택자는 클래스 선택자를 이기고, 클래스 선택자는 유형 선택자를 이깁니다. 따라서 #header와 .title 모두 같은 요소에 색상을 설정하면, id가 이깁니다. 두 규칙이 동일하게 명시일 때, 파일에서 나중에 쓰인 규칙이 이깁니다.

여러 규칙이 같은 요소를 대상으로 하고 같은 속성을 설정할 때, 브라우저는 **명시도**로 충돌을 해결하며, 이는 관련된 선택자의 종류에 기반한 점수입니다. 강도 순서는 가장 강한 것부터 가장 약한 것까지: 인라인 스타일(style 속성이 요소에 있음), 그 다음 id, 그 다음 클래스(의사 클래스 및 속성 선택자), 그 다음 유형 선택자(의사 요소). 더 구체적인 선택자는 출처 순서에 상관없이 이기며; 명시도가 동일할 때만 나중 규칙이 이깁니다.

이것이 클래스를 선호하고 스타일링을 위해 id를 피하는 실제 이유입니다. id를 가진 스타일링을 하면, 나중에 오는 클래스 규칙은 이를 재정의할 수 없으므로, 당신은 에스컬레이션을 끝냅니다. 그리고 !important는 모든 것을 이기도록 강제하기 위해 선언에 붙일 수 있으며, 최후의 수단으로 취급되어야 합니다: 이것은 정상적인 캐스케이드를 깨뜨리고 !important를 이기는 유일한 방법은 또 다른 !important이며, 이는 당신이 시작하길 원하지 않는 나선입니다.

**명시도**는 브라우저가 충돌하는 선언 사이에서 선택하는 데 사용하는 알고리즘입니다. (a, b, c)로 작성되는 3부분 카운트로 계산됩니다: a는 id 선택자의 수이고, b는 클래스, 속성, 의사 클래스 선택자의 수이고, c는 유형 및 의사 요소 선택자의 수입니다. 부분은 왼쪽에서 오른쪽으로 비교되므로, 모든 id는 어떤 클래스 수를 이기고, 모든 클래스는 어떤 유형 선택자 수를 이깁니다. #header .title a는 (1, 1, 1)을 점수하고; .nav .menu .item a는 (0, 3, 1)을 점수합니다; 첫 번째는 id만으로도 이깁니다. 인라인 style 속성은 모든 선택자 명시도 위에 앉고, !important (값에 붙여 강제하는 플래그)는 심지어 그것도 재정의합니다; 범용 선택자 *와 결합자는 점수에 아무것도 추가하지 않습니다.

두 가지 현대 도구가 이를 관리하는 방법을 변경합니다. :is()는 선택자 목록을 취하고 그 중 하나와 일치하면 일치하지만, 가장 구체적인 인수의 명시도를 취하므로 :is(#header, .title)은 id의 가중치를 상속합니다. :where()는 같은 일치를 하지만 항상 0 명시도를 가지므로, 무엇이든 재정의할 수 있는 낮은 가중치 기본 스타일을 작성하는 도구입니다. :has(), 관계 의사 클래스는 뭔가 포함하는 요소와 일치합니다("이미지를 가진 .card", .card:has(img))이고 그 인수의 명시도를 취합니다. 이 모든 것 아래의 유지보수 습관은 명시도를 낮고 평탄하게 유지하는 것입니다: 단일 클래스 선택자를 선호하고, id와 !important를 피하고, 기본값이 양보하길 원하는 곳에서 낮은 가중치를 0으로 만들기 위해 :where()를 사용하세요. 평탄한 명시도는 나중 규칙이 항상 나중에 있음으로써 이길 수 있다는 의미이며, 이것이 캐스케이드가 당신을 대항하는 대신 당신을 위해 작동하는 것입니다.

/* 유형 선택자, 명시도 (0, 0, 1) */
p {
  color: grey;
}

/* 클래스 선택자, 명시도 (0, 1, 0): 이 규칙이 이깁니다 */
.intro {
  color: black;
}

<p class="intro">이 단락은 검은색입니다. 클래스 규칙이 유형 규칙을 능가하기 때문입니다.</p>

둘 다 단락을 대상으로 하고 color를 설정하지만, 클래스 선택자가 유형 선택자보다 더 구체적이므로 단락은 검은색입니다. 한 선택자를 명시도 사다리 위나 아래로 밀어내는 것은 종종 무거운 도구에 의존하지 않고 충돌을 정산하기 위해 필요한 모든 것입니다. 박스 모델 장은 간격 규칙이 충돌할 때 같은 캐스케이드에 들어갑니다.

Juno명시도 두 규칙이 같은 요소를 두고 싸울 때, 더 구체적인 것이 이깁니다: id는 클래스를 이기고, 클래스는 유형 선택자를 이깁니다. 동등하게 구체적이면, 파일에서 마지막에 오는 것이 이깁니다. 이것이 대부분의 충돌을 설명합니다.

Juno명시도 강도는 인라인, id, 클래스, 유형 순서입니다. 더 구체적인 규칙은 파일의 어디에 앉든 이깁니다. 이것이 클래스로 스타일링하고 스타일링을 위해 id를 피하면 CSS를 재정의 가능하게 유지하는 이유입니다. !important를 마지막 수단으로 유지하세요. 하나의 것이 다른 것을 이기는 유일한 방법이 또 다른 것이기 때문입니다.

Juno명시도 명시도는 (a, b, c)로 id, 클래스, 유형으로 계산되며, 왼쪽에서 오른쪽으로 비교됩니다. 낮고 평탄하게 유지하세요: 단일 클래스, 스타일링을 위한 id 없음, !important 없음, 기본값이 양보하길 원하는 곳에 :where()를 사용하세요. 평탄한 명시도는 나중 규칙이 항상 나중에 있음으로써 이길 수 있다는 의미이며, 이것이 캐스케이드가 당신과 함께 작동하는 것입니다.