CSS ile bir dize ile başlayan kimliği seçme (Javascript'te değil)?

194

HTML'de bunun gibi öğeler varsa:

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

Tüm bu kimliklerin "ürün" ile başlayarak nasıl eşleşirim?

Tam olarak javascript kullanarak bunu yapan cevaplar gördüm, ama sadece CSS ile nasıl?

html css css-selectors

— guptron
kaynak

364

[id^=product]

^="şununla başlar" belirtir. Tersine, $="ile biter" i gösterir.

Semboller aslında Regex sözdiziminden ödünç alınır ^ve burada $"dizgenin başlangıcı" ve "dizgenin sonu" anlamına gelir.

Tam bilgi için teknik özelliklere bakın .

— Karanlık Mutlak
kaynak

1

Yöntem ve açıklama için teşekkürler, sorumu daha açık şekilde düzenledim. Meraktan, kimliğin dizesinin içindeki bir dizeyi eşleştirmenin bir yolu var mı?

— guptron

Teknik özelliklere bakın , benden daha iyi açıklıyorlar!

— Niet the Dark Absol

@itamar: Cevabımı düzenleme girişiminiz için teşekkür ederim, ancak yalnızca değer geçerli bir tanımlayıcı olmayan karakterler içeriyorsa alıntı yapılması gerekir. productaçık bir şekilde geçerli bir tanımlayıcıdır ve bu nedenle tırnak içine alınması gerekmez.

— Niet the Dark Absol

Bu tür seçicinin özgüllüğü çok düşük

— Nuander

3

@ Emerald214:not([id^=product])

— Niet the Dark Absol

59

Bunu şöyle yaparım:

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

İdeal olarak, bir sınıf kullanın. Sınıflar bunun içindir:

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

Ve şimdi seçici olur:

.product {
  ...
}

— karıştırıcı
kaynak

1

@Blender, teşekkürler, diğer cevabı seçtim çünkü bana biraz daha açıklıyor ve kullanılan sembolleri anlıyor. Bu senaryo için sınıfları kullanamıyorum, aksi takdirde evet daha güzel olurdu.

— guptron

5

Kullan özellik seçici

[id^=product]{property:value}

— Musa
kaynak

-1

Aynı şeyi yapan başka bir CSS seçici olduğunu fark ettim. Sözdizimi aşağıdaki gibidir:

[id|="name_id"]

Bu, çift tırnak içine alınmış sözcükle başlayan tüm öğe kimliğini seçecektir.

— Luigi Spezia
kaynak

Nasıl fark ettin? referans?

— Ben Bozorg

Bunun için doküman burada: w3.org/TR/selectors-3/#attribute-selectors Bu, "name_id" ile başlayan veya eşit olan tüm kimliği seçmelidir

— Dessauges Antoine

att|=valile aynı DEĞİLDİR att^=val. Bahsedilen referanstan: |=Seçici "att özniteliğine sahip bir öğeyi temsil eder, değeri tam olarak" val "veya" val "ile başlayan ve hemen" - "ile başlar . Dolayısıyla" product42 "gibi bir kimlik ile eşleşmez |=, ancak "ürün-42" olurdu.

— Goozak