Jak zmusić CSS do wybrania identyfikatora zaczynającego się od łańcucha (nie w Javascript)?

192

Jeśli HTML ma takie elementy:

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

Jak dopasować wszystkie te identyfikatory zaczynające się od „produktu”?

Widziałem odpowiedzi, które robią to dokładnie za pomocą javascript, ale jak to zrobić tylko za pomocą CSS?

html css css-selectors guptron
źródło

Odpowiedzi:

361 
[id^=product]

^=wskazuje „zaczyna się od”. I odwrotnie, $=wskazuje „kończy się na”.

Symbole są faktycznie zapożyczone ze składni Regex, gdzie ^i $oznaczają odpowiednio „początek łańcucha” i „koniec łańcucha”.

Zobacz specyfikację, aby uzyskać pełne informacje.

Niet the Dark Absol
źródło
1
Dzięki za metodę i wyjaśnienie, zredagowałem moje pytanie, aby było bardziej jasne. Z ciekawości, czy istnieje sposób na dopasowanie łańcucha wewnątrz łańcucha identyfikatora?
guptron
Zobacz specyfikacje , wyjaśniają to lepiej niż ja!
Niet the Dark Absol
@itamar: Doceniam twoją próbę edycji mojej odpowiedzi, ale cytat jest wymagany tylko wtedy, gdy wartość zawiera znaki, które nie są prawidłowym identyfikatorem. productjest wyraźnie prawidłowym identyfikatorem i dlatego nie wymaga cudzysłowów.
Niet the Dark Absol
Specyfika tego rodzaju selektora jest bardzo niska
nuander
3
@ Emerald214:not([id^=product])
Niet the Dark Absol
59

Zrobiłbym to w ten sposób:

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

Najlepiej użyj klasy. Do tego służą klasy:

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

A teraz selektor staje się:

.product {
  ...
}
Mikser
źródło
1
@Blender, dziękuję, wybrałem inną odpowiedź, ponieważ wyjaśnia mi ona nieco więcej i rozumie używane symbole. Nie mogę użyć klas w tym scenariuszu, w przeciwnym razie tak byłoby lepiej.
guptron
-1

Zauważyłem, że istnieje inny selektor CSS, który robi to samo. Składnia jest następująca:

[id|="name_id"]

Spowoduje to wybranie identyfikatora wszystkich elementów, który zaczyna się od słowa zawartego w podwójnych cudzysłowach.

Luigi Spezia
źródło
Jak zauważyłeś odniesienie?
Ben Bozorg,
Dokumentuj to tutaj: w3.org/TR/selectors-3/#attribute-selectors To powinno wybrać wszystkie id, które zaczynają się lub są równe „name_id”
Dessauges Antoine
att|=valnie jest taki sam jak att^=val. Ze wspomnianego odniesienia: |=Selektor „Reprezentuje element z atrybutem att, którego wartość to albo dokładnie„ val ”, albo zaczynająca się od„ val ”, po którym bezpośrednio następuje„ - ” .” Tak więc identyfikator podobny do „product42” nie pasowałby do |=, ale „produkt-42” by to zrobił.
Goozak