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

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

5

Użyj selektora atrybutów

[id^=product]{property:value}

— Musa
źródło

-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