[Résolu] Sélecteurs multiples de classes

Bonjour
Ci-dessous les extraits de code :

<div class="grid-12col">
     <div class="col-6">..........
     <div class="block-branding col-12">.........

[class|="block"] {
    border: 1px dotted green;
    padding: 8px;
}
[class|="col"] {
    background-color : hsl(0,0%, 92% );
 }
.col-6 { grid-column: span 6; }
.col-12{ grid-column: span 12;}

La div avec col-6 prend bien le background défini dans [class|="col"] ainsi que la bonne largeur d'item de grille grid-column: span 6;
Par contre et c'est là mon problème :
La div class="block-branding col-12"> prend bien le padding et border définis dans la classe "block" ainsi la bonne largeur définie dans la classe col-12, mais ne prend pas le background défini dans la classe multiple [class|="col"] .
Donc j'ai besoin d'un peu d'aide.
Merci
Modifié par cpalo (03 Apr 2021 - 13:26)

Salut,

Faut regarder les spec !

a écrit :
[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"

https://www.w3schools.com/cssref/css_selectors.asp

Merci
Cela m'offre un peu plus de possibilités que ce que j'utilisais [class|="col"] {...} même si cela fonctionne aussi.
Pour mon problème j'avais du faire une erreur sur un ; ou sur un -
Je suis reparti à zéro et c'était ok avec les deux formes.
Cordialement