특정 HTML 요소를 대상으로 지정하기 위해 CSS의 클래스 및 ID 선택기를 어떻게 결합할 수 있습니까?

CSS 선택기에서 클래스와 ID 결합

HTML 요소의 스타일을 지정할 때 특정 요소를 대상으로 지정하기 위해 클래스와 ID를 모두 사용하는 것이 일반적입니다. 어떤 경우에는 두 기준을 모두 결합해야 할 수도 있습니다. 이를 달성하는 방법은 다음과 같습니다.

ID와 클래스를 모두 사용하여 요소 쿼리

다음 HTML을 고려하세요.

<div>
<p>이 요소의 스타일을 다음과 같이 지정합니다. "sectionA" 클래스와 "content" ID가 모두 있음을 확인하려면 다음 CSS를 사용하세요. selector:</p>
<pre class="brush:php;toolbar:false">div#content.sectionA

이 선택기에서는 "#" 기호가 ID 앞에 오고 "." 기호는 클래스 앞에 옵니다. 이렇게 하면 CSS 규칙이 두 기준을 모두 충족하는 요소에만 적용됩니다.

추가 참고 사항

선택기에서 클래스와 ID의 순서가 중요하다는 점을 기억하세요. ".sectionA#content"를 작성하면 반드시 "content"일 필요는 없지만 "sectionA" 클래스와 ID가 있는 요소가 선택됩니다.

대체 접근 방식

위의 기술을 사용하면 여러 클래스 또는 여러 ID를 결합할 수 있습니다. 그러나 긴 선택자를 피하기 위한 대체 접근 방식이 있습니다.

1. 클래스 연결: "content-sectionA" 또는 "sectionA-content"와 같은 클래스 이름을 연결하여 고유한 클래스를 만듭니다. 이렇게 하면 선택기가 ".content-sectionA" 또는 ".sectionA-content"로 단순화됩니다.
2. 하위 선택기 사용: 클래스가 하위 요소에 적용되는 경우 "> ;" 선택기의 기호(예: "div#content > p.sectionA."

)