Cibler une chaine de caractere en CSS

Version imprimable

19/11/2015, 11h00
frederickson

Cibler une chaine de caractere en CSS

Bonjour,

Je souhaiterai pouvoir cibler une chaine de caractere precise de mon identifiant css.

Exemple:

Code:

<body class="classe1 classe2 classe3-sous-classe"></body>

il faudrait que je puisse pointer sur tous les body qui incluent la chaine de caractere "sous-classe".

Je vous remercie.
19/11/2015, 11h15
Jacques Beauregard
Bonjour,

Tu as plusieurs body sur ta page HTML ? :calim2:
ce code par exemple
Code:

1 2 3 div.classe3-sous-classe{ /*code css*/ }
pointera sur tous les <div> de classe "classe3-sous-classe" (au même ordre qu'un AND logique)

Bref peux-tu nous en dire plus?
19/11/2015, 11h25
frederickson

Non en fait je souhaiterai cilbler sur la chaine de caractere sous-classe et non pas sur la classe dans sa totalité.
19/11/2015, 13h06
Invité

Bonjour,
à priori pas en CSS pur.
En SCSS peut-être (mais je ne connais pas).

Sinon, le plus simple est quand même d'ajouter dans le HTML une classe "sous-classe", commune aux body concernés, non ?

Code:

<body class="classe1 classe2 classe3-sous-classe sous-classe"></body>

Cela dit, un VRAI exemple, avec de vrais noms de classes auraient peut-être été utile...
19/11/2015, 14h37
frederickson

Et non malheureusement la classe se lie automatiquement a la rubrique dans laquelle la page est située.
subsection-nom-fr-accueil_laboratoire

Tu nous en dis pas beaucoup.
Cependant un exemple avec Javascript peut-être?

Code:

1
2
3
<div class="classe1 classe2 class3-sous-classe">Cest ok</div>
<div class="classe1 classe2 class4-sous-classe">Cest ok</div>
<div class="classe1 classe2 class3-sou-classe">Cest ko</div>

Code:

1
2
3
4
5
6
7
 
var divs = document.getElementsByTagName("DIV");
for(var i=0;i<divs.length;i++){
    if(divs[i].className.indexOf("sous-classe")>-1){
    divs[i].style.color="green";
    }
}

20/11/2015, 09h46
frederickson

Merci pour ton aide c'est cool.
J'aimerai cependant n'utiliser que les CSS.
N'existe t'il pas de selecteur comme before, after, etc qui me permettrait de pointer dessus?

Bonjour,
tu n'as pas dû chercher beaucoup :
5s sur :google: "css class like..." -> ceci
Code:

1 2 3 div[class*='blabla-']{ color:red; }
Code:

1 2 3 <div class="classe1 classe2 blabla-classe3">dfdh dfghdghdfgh dghd dfgh</div> <div class="classe4 classe5 blabla-classe6">yu tryufghj yuy</div> <div class="classe7 classe8 blabla-classe9">azer azer erertzert srzer </div>
N.B. Du coup, on aura tous appris quelque chose ;)

20/11/2015, 13h19
Jacques Beauregard

Citation:

N.B. Du coup, on aura tous appris quelque chose

:plusser:
20/11/2015, 16h03
thelvin

Ouais enfin, c'est quand même pas top, du coup ça match aussi sur la classe ablabla-truc alors qu'on ne voulait que la classe blabla-*

Fondamentalement, l'idée est plutôt de mettre des vraies classes en lieu et place de n'importe quoi.
21/11/2015, 16h47
NoSmoking

Bonjour,

Citation:

Envoyé par jreaux62

N.B. Du coup, on aura tous appris quelque chose ;)

c'est quand même du CSS2, Sélecteur d'attribut CSS2 étendu en CSS3, Sélecteur d'attribut CCS3, reconnus depuis IE7 donc autant dire des lustres ;)
21/11/2015, 16h51
Invité

Certes,
mais je n'ai jamais eu besoin d'utiliser cette syntaxe, étant, fondamentalement d'abbord avec Thelvin ;)
21/11/2015, 17h17
NoSmoking

Concernant le cas pris de ce post je considère également que le passage par une classe à part entière.

Il est des cas où justement on peut se passer de classe justement en ciblant tout où partie d'un attribut div[id^="onglet"] par exemple ou encore la mise d'un petit drapeau de langue via un :before sur un lien...
01/12/2015, 11h21
frederickson

Très bien, merci pour votre aide.
Je vais essayer la solution de jreaux62.