CSS 선택자가 클래스 접두사를 기반으로 요소를 대상으로 지정할 수 있습니까?

클래스 접두사별 CSS 선택기

질문:

CSS를 적용하는 것이 가능합니까? 하나 이상의 클래스가 지정된 접두사로 시작하는 요소에 규칙을 적용합니까? 예를 들어 다음 HTML 스니펫이 있다고 가정해 보겠습니다.

<div>
<p>"status-"로 시작하는 클래스가 있는 div만 대상으로 하는 규칙을 적용할 수 있습니까?</p>
<p><strong>답변:</strong></p>
<p><strong>CSS 2.1:</strong></p>
<p>CSS 2.1에서는 이것이 불가능합니다.</p>
<p><strong>CSS 3:</strong></p>
<p>CSS3은 속성 하위 문자열 일치 선택기를 도입했습니다. 이것 가능:</p>
<pre class="brush:php;toolbar:false">div[class^="status-"], div[class*=" status-"]

• [class^="status-"] 클래스 속성이 "status-"로 시작하는 요소와 일치합니다.
• [class*=" status-" ]는 클래스 속성에서 공백 문자 바로 뒤에 "status-"가 포함된 요소와 일치합니다(다른 단어의 일부가 아닌지 확인).

참고 클래스 이름은 일반적으로 공백으로 구분되므로 후자 선택자에는 의도적인 공백 문자가 포함됩니다. 이는 요소의 클래스 속성에 있는 다른 클래스를 확인하고 클래스 속성이 공백으로 채워진 경우도 처리합니다.

마크업에 상태 접두사가 다른 단어에 포함된 요소가 절대 포함되지 않을 것이라고 보장할 수 있다면 선택기를 [class*="status-"]로 단순화할 수 있습니다. 그러나 견고성을 위해 두 선택기의 조합을 권장합니다.

또는 HTML 생성을 제어할 수 있는 경우 원하는 접두사를 사용하여 전용 "상태" 클래스를 만드는 것이 더 쉬울 수도 있습니다.