web-dev-qa-db-fra.com

Appliquer le code CSS à un groupe de classes css contenant une sous-chaîne

Je n'étais pas sûr du meilleur moyen de formuler cela, et c'est probablement pourquoi j'ai eu du mal à le rechercher, même si c'est probablement simple.

Ce que je veux faire, c'est appliquer un CSS à un groupe de classes.

Par exemple, j'ai les classes .col-1, .col-2, .col-3, .col-4

Ce que je veux être capable de faire est de faire quelques css qui peuvent dire peut-être changer la couleur de la bordure pour toutes les classes avec le texte col- afin que je n'ai pas à l'appliquer à chaque numéro individuel.

Je suis sûr que j'ai déjà vu cela auparavant, mais je ne vois pas comment le faire.

csscss-selectors
26
Suzi Larsen

Vous pouvez utiliser [class*="col-"]sélecteur d'attribut CSS pour sélectionner tout élément contenant au moins une occurrence de col- en tant que valeur class.

[class*="col-"] {
    border-color: red;
}

Si toutes les valeurs des attributs class commencent par col-, vous pouvez utiliser le sélecteur [class^="col-"].

Toutefois, afin d'éviter que des classes telles que foo-col-1 soient sélectionnées, vous pouvez utiliser une combinaison des deux sélecteurs ci-dessus comme suit (Merci à @JosephSpens ):

[class^="col-"], [class*=" col-"] {
  border-color: red;
}

WORMO DEMO.

66
Hashem Qolami

Vous pouvez utiliser 

CSS [attribut * = valeur] sélecteur 

<style>
div[class*=col-]{
color: green;
}
</style>

<body>
<div class="col-4">
<p>this is an example one</p>
<div>
<div class="test">
<p>this is an example one</p>
<div>
<div class="col-8">
<p>this is an example three</p>
<div>
</body>

S'il vous plaît vérifier le lien ci-dessous

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

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_attr_contain

0
Arshad Syed