sélecteurs CCS

[arno. sans ses cookies]

Bonjour,
j'aimerais faire une régle CSS pour disons pas exemple :
tous les éléments qui ont pour classe, soit toto, soit tata, et qui sont enfants, soit d'un <div>, soit d'un <p> (4 possibilités)

le problème, c'est que si j'essaye de faire :

Code : Tout sélectionner

p , div > .toto , .tata 

, firefox comprend :
soit un <p>, soit un enfant de <div de classe toto, soit un élément de class tata.

J'aimerais pouvoir faire des groupements, un genre de parenthèses, pour ne pas avoir à écrire 4 règles ?

J'ai regardé dans la doc, mais je n'ai rien trouvé qui puisse m'aider. Est-ce que c'est parceque ce n'est pas possible, ou est-ce que c'est parceque je n'ai pas trouvé ?

d'avance merci beaucoup.

[calimo]

La virgule c'est pour définir un nouveau sélecteur. Donc il est "fini" si on veut, ici au p (tout seul). À ma connaissance il n'y a pas de sélecteur "OR" (même pas en CSS3 (attention, tu as le lien d'une plus vieille version malheureusement ).

Il va donc falloir te résoudre à faire 4 sélecteurs. C'est un peu chiant, ça devient vite incompréhensible quand tu as des choses compliquées du style

Code : Tout sélectionner

#contenu a[href^="mailto:"][accesskey]:after, #plan a[href^="mailto:"][accesskey]:after, #contenu a[href$="contact.html"][accesskey]:after, #plan a[href$="contact.html"][accesskey]:after

mais c'est la seule solution.

Edit : à moins que du côté de http://www.w3.org/TR/2001/CR-css3-selec ... 3/#grammar il y ait le | ? Valable aussi pour les éléments ? C'était connu pour les attributs...

On aurait alors

Code : Tout sélectionner

[p | div] > [.tata | .toto ]

(aucune chance que ça marche dans aucun navigateur avant longtemps malheureusement )

Edit 2 : mon super-sélecteur deviendrait donc

Code : Tout sélectionner

[#contenu | #plan] a[accesskey][[href^="mailto:"] | [href$="contact.html"]]:after

Cela dit je doute que le même signe soit utilisé pour sélectionner les attributs et pour grouper. Je peux avoir mal compris quelque chose
Edit3 : je suis surement faux parce que Groups of selectors ne dit rien.

[arno.]

Bon bah tant pis, ça va pas être pratique, parcequ'en fait, j'ai 15 * 2 possibilités.
Du coup, je m'en suis sorti en mettant un <div id='workaround' autour de tout ça, et en faisant

Code : Tout sélectionner

#workaround > * > [.tata] 

et

Code : Tout sélectionner

#workaround > * > [.toto]

(dans ma configuration, ça marche).

sinon, ce que je pourrais faire aussi, c'est mettre une classe exprès dans les div et les p concernés, mais le problème c'est que les div et les p ont déjà des classes définies pour définir d'autres propriétés.

du coup il faudrait que je fasse par exemple :
<p class="bleu encadre"> et <div class="rouge encadre">
mais le problème, c'est que quand il y a deux noms de classes, ça devient plus difficile à manipuler avec javascript .

En tout cas, merci pour le lien vers la version récente de la spécification CSS3

[calimo]

Code : Tout sélectionner

#workaround > * > [.tata] 

et

Code : Tout sélectionner

#workaround > * > [.toto]

(dans ma configuration, ça marche).

Pouquoi des crochets autour des classes ?

Tu peux également faire

Code : Tout sélectionner

#workaround .toto

(à moins que tu n'ait de .toto plus en profondeur et que tu ne veux pas qu'ils soient affectés).
Avantage : c'est compatible avec IE (si le but est de publier )

[arno.]

Code : Tout sélectionner

#workaround > * > [.tata] 

et

Code : Tout sélectionner

#workaround > * > [.toto]

(dans ma configuration, ça marche).

Pouquoi des crochets autour des classes ?

erreur de recopiage de ma part/

Tu peux également faire

Code : Tout sélectionner

#workaround .toto

(à moins que tu n'ait de .toto plus en profondeur et que tu ne veux pas qu'ils soient affectés).

excellent

Avantage : c'est compatible avec IE (si le but est de publier )

En fait, j'ai écrit <div> et <p> pour simplifier le problème, mais c'est du svg que je fais. Alors je m'occuperais de la compatibilité CSS d'IE quand il supportera le SVG en natif

[Bobe]

Calimo: La barre verticale sert à sélectionner des éléments ou attributs dans un espace de nom donné (sauf dans le cas de [att|=val] qui fait autre chose).

http://www.w3.org/TR/2001/CR-css3-selec ... -selectors (paragraphes 6.1, 6.2 et 6.3 en particulier)

[arno.]

mais le problème, c'est que quand il y a deux noms de classes, ça devient plus difficile à manipuler avec javascript .

bon finalement, je suis obligé de mettre plusieurs noms de classe.
Alors je fais comme ça :

Code : Tout sélectionner

Node.prototype.addClassName = function (name) {
   if (!this.hasAttribute("class")) {
      this.setAttribute("class", name);
      return;}
   var list = this.className.split(" ");
   for (var i in list)
      if (name == list[i]) return;
   list.push(name);
   this.className = list.join(" "); }

Node.prototype.removeClassName = function (name) {
   var list = this.className.split(" ");
   for (var i in list)
      if (list[i] == name)
   list.splice(i,1);
   this.className = list.join(" "); }

et comme ça, si je veux rajouter une classe sur un élément el, j'ai qu'à faire :

Code : Tout sélectionner

el.addClassName("cequejeveux");

et si je veux l'enlever :

Code : Tout sélectionner

el.removeClassName("cequejeveuxpas");

PS : pour le SVG, il faut remplacer className par className.baseVal à partout dans les deux fonctions.