symbol wieloznaczny * w CSS dla klas

669

Mam te divy, z którymi projektuję .tocolor, ale potrzebuję również unikalnego identyfikatora 1,2,3,4 itd., Więc dodaję to jako inną klasę tocolor-1.

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

Czy istnieje sposób, aby mieć tylko 1 klasę tocolor-*. Próbowałem użyć symbolu wieloznacznego *jak w tym css, ale to nie działało.

.tocolor-*{
  background: red;
}

css css-selectors wildcard

— świergot
źródło

1

Oto oficjalna strona CSS3 na temat selektorów: w3.org/TR/css3-selectors oraz lista kompatybilności

— GarfieldKlon

1216

To, czego potrzebujesz, nazywa się selektorem atrybutów. Przykład użycia struktury HTML jest następujący:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

W miejsce divmożesz dodać dowolny element lub całkowicie go usunąć, a zamiast tego classmożesz dodać dowolny atrybut określonego elementu.

[class^="tocolor-"]- zaczyna się od „tocolor-”.
[class*=" tocolor-"]- zawiera podciąg „tocolor-” występujący bezpośrednio po znaku spacji.

Demo: http://jsfiddle.net/K3693/1/

Więcej informacji na temat selektorów atrybutów CSS można znaleźć tutaj i tutaj . I z MDN Docs MDN Docs

— Sotiris
źródło

2

Fajne informacje. Jedynym zastrzeżeniem jest to, że wydajność stanowi problem, większość linterów CSS odrzuci selektory atrybutów, które przypominają wyrażenia regularne (np. Używając „*”) b / c niskiej wydajności. Czy istnieje inny możliwy sposób, z wyjątkiem korzystania z preprocesora (np. Sass)?

— CodeFinity

2

Czy istnieje sposób sprawdzenia, czy atrybut klasy zawiera wiele podciągów? Może coś takiego div[class*="foo"][class="bar"]?

— Connor,

Ta przestrzeń w naszym przykładzie „zawiera” jest dość zabójcza. Z tego, co widzę, nie powinno tam być, prawda?

— Thomas

1

@Thomas To jest wymagane, aby zapewnić class="foo tocolor-red"dopasowanie, ale nieclass="foo fromtocolor-red-blue"

— aleclarson

Dzięki za to. Używam tej techniki od kilku lat, ale nigdy nie zdawałem sobie sprawy, że klasa ^ = dotyczy tylko początku wpisu klasy HTML. Myślałem, że dotyczy wszystkich nazw klas zdefiniowanych dla znacznika HTML.

— BevansDesign

108

Tak, możesz to zrobić.

*[id^='term-']{
    [css here]
}

Spowoduje to wybranie wszystkich identyfikatorów zaczynających się od 'term-'.

Jeśli chodzi o powód, aby tego nie robić, widzę, gdzie lepiej byłoby wybrać ten sposób; jeśli chodzi o styl, nie zrobiłbym tego sam, ale jest to możliwe.

— thomas.han
źródło

Dziękuję za ten IDoparty na dodatku, nie tylko za class.

— Khom Nazid,

26

Alternatywne rozwiązanie:

div[class|='tocolor'] będzie pasować do wartości atrybutu „class” zaczynających się od „tocolor-”, w tym „tocolor-1”, „tocolor-2” itp.

Uważaj, że to nie będzie pasować

<div class="foo tocolor-">

Odniesienie: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Reprezentuje element z atrybutem att, którego wartość to dokładnie „val” lub zaczynająca się od „val”, po którym bezpośrednio następuje „-” (U + 002D)

— adroitec
źródło

12

To nie zadziała, jeśli classatrybut zaczyna się od innej klasy, która się nie zaczyna tocolor.

— BoltClock

1

Działa to również pięknie w arkuszach stylów Qt. Na przykład, aby zastosować styl do wszystkich nazwanych etykiet foo*, zrób toQLabel[objectName|='foo'] { ... }

— Przywróć Monikę

Jak powiedział @BoltClock, to rozwiązanie psuje się, jeśli element ma wiele klas i nie zaczynają się od klasy, której szuka OP.

— Dan Dascalescu,

Nie działa w Chrome 78, * i ^ jednak działają.

— Gordon Mohrin

3

Jeśli nie potrzebujesz unikalnego identyfikatora do dalszego stylowania div i używasz HTML5, możesz spróbować użyć niestandardowych atrybutów danych. Czytaj tutaj lub spróbuj wyszukać w GoogleHTML5 Custom Data Attributes

— DKSan
źródło