CSS로 문자열로 시작하는 ID를 선택하는 방법 (Javascript가 아닌)?

HTML에 다음과 같은 요소가있는 경우 :

id="product42"
id="product43"
...

"product"로 시작하는 모든 ID를 어떻게 일치합니까?

자바 스크립트를 사용하여 정확하게 수행하는 답변을 보았지만 CSS로만 수행하는 방법은 무엇입니까?

[id^=product]

^="로 시작"을 나타냅니다. 반대로 $="끝"을 나타냅니다.

기호 실제로 정규식 구문에서 차용 ^하고 $각각과 "문자열의 끝" "문자열의 시작"을 의미한다.

자세한 내용 은 사양 을 참조하십시오 .

나는 이렇게 할 것입니다 :

[id^="product"] {
  ...
}

이상적으로는 수업을 사용하십시오. 이것은 클래스에 대한 것입니다.

<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>

이제 선택기가 다음과 같이됩니다.

.product {
  ...
}

사용 속성 선택을

[id^=product]{property:value}

나는 똑같은 일을하는 또 다른 CSS 선택기가 있음을 알아 차렸다. 구문은 다음과 같습니다.

[id|="name_id"]

큰 따옴표로 묶인 단어로 시작하는 모든 요소 ID를 선택합니다.