Discussion :

[french-petzouille]

Bonjour

Comment indiquer en jQUERY de mettre en rouge :

TOUS les éléments de ma page ayant la classe .fa

SAUF CEUX DONT

les PARENTS ont la classe .btn-color

j'ai entre autres tentatives essayé cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.fa').parent(':not(.btn-color)').css({'color':'red'});

mais plouf .

par exemple : tous mes boutons comme ceux ci-dessous ne doivent pas être affecté par la modification de couleur du <span>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<button class="btn-color">
<span class="fa fa-info fa-lg"></span> - Par nom
</button>

(vous aurez peut-être reconnu l'usage des font "awesome font" )

merci

une idée ?

[fredoche]

Quand j'essaie ton truc dans jsfiddle ça marche

[Invité]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$('.fa').each( function(){
   if( !$(this).parent().hasClass('.btn-color') )
   {
      $(this).css({'color':'red'});
   }
});

[french-petzouille]

merci les collègues

dans jsdiffle ca marche en effet ...pas dans ma page ...
la proposition avec .each est aussi OK.

sinon en Css PUR ... comment traduire ma demande ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.fa:not(button>span.fa)  {color:'red'}

ca colle pas

[NoSmoking]

Bonjour,
on peut s'interroger sur l'utilité d'utiliser jQuery pour affecter un style à des éléments, sauf bien sûr si cela participe au « dynamisme » de la page, ce qui ne semble pas être le cas ici.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
button:not(.btn-color) .fa{
    color: red;
}

ou en précisant enfant direct

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
:not(.btn-color) > .fa{
    color: red;
}

En reportant ces sélecteurs dans ton jQuery tu devrais obtenir le même résultat

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$('button:not(.btn-color) .fa').css({
    'color': 'red'
});
// ou
$(':not(.btn-color) > .fa').css({
    'color': 'red'
});

Ceci n'empêche que ton code ne fonctionne pas comme tu le souhaites car c'est aux parents que tu appliques le CSS et non aux éléments de classe="fa" !

[Watilin]

Un petit mot à propos de la performance des sélecteurs.
Le sélecteur :not(…) est équivalent à *:not(…). Autrement dit, c’est un * implicite. Et * est un des sélecteurs les moins performants.
Donc il vaut mieux toujours préciser button:not(…).

[french-petzouille]

Bonjour à tous et merci pour votre aide. J’ai effectivement trouvé parmi vos propositions une solution qui fonctionne.
Elle utilise le sélecteur :not même si elle serait gourmande.

C’est donc celle-là qui marche.

:not(.btn-color)> .fa{color:’red ´}

alors une question

cette proposition

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
button:not(.btn-color) .fa{
    color: red;
}

est-elle vraiment identique à celle ci

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

:not(.btn-color)> .fa{color:’red ´}

car l'une donne satisfaction et l'autre non.

[NoSmoking]

est-elle vraiment identique à celle ci

Non, si l'on excepte les erreurs de syntaxe, la spécificité des sélecteurs n'est pas la même ce qui peut poser problème dans certains cas.

car l'une donne satisfaction et l'autre non.

C'est normal, l'une est conforme CSS pas l'autre

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
:not(.btn-color)> .fa {
    color:’red ´
}

est non conforme il y a des quottes en trop ce qui invalide la déclaration.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
:not(.btn-color)> .fa {
    color: red;
}

[french-petzouille]

Tu as raison...

Cependant en corrigeant la syntaxe :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
:not(.btn-color)> .fa {
    color: red;
}

et

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
button:not(.btn-color) .fa{
    color: red;
}

ne se comporte pas de la même manière.
Seule la première est OK.



Puisque tu es hyper calé ... je me permet de te soumettre un complément de solution :


dans le html suivant (extrait) :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<button class="btn-color"><span class="fa fa-info fa-lg"></span> - Par nom</button>
<button class="btn-color"><span class="fa fa-alert fa-lg"></span> - Par ville</button>
<span class="fa fa-alert fa-lg">Coucou</span>
<span class="fa fa-check fa-lg">Recoucou</span>

Comment spécifier que je souhaite avoir :

- Une coloration ROUGE sur les éléments de classe 'fa' ...
- qui ne sont pas dans des BOUTONS ... ( CA TU Y ES PARVENU ... MERCI ENCORE )

ET qui ne sont pas de classe 'fa-alert' !!

ça devient tordu.
(petite explication : je permet sur un site dynamique de changer la couleur des icônes des pages ... MAIS pas si l'icône se retrouve dans un bouton ou si l'icône est de nature à alerter visuellement le visiteur ( irones style coche check ou icône alerte . cela permet de garder des couleurs particulières a certaines icônes pour être plus parlantes que si elles avaient aussi la même couleur que toutes les autres)


merci

[Invité]

Bonjour,,

Précise-nous d'abord :

• ta version de Bootstrap
• ta version de Font-awesome

[NoSmoking]

ne se comporte pas de la même manière.
Seule la première est OK.

dans ton contexte initial le comportement est le même, rappel du contexte initial

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<button class="btn-color">
    <span class="fa fa-info fa-lg"></span> - Par nom
</button>

Maintenant dans ton nouveau contexte cela ne peut plus fonctionner de la même manière.

Petit rappel, les sélecteurs CSS se lisent de droite à gauche donc

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

button:not(.btn-color) .fa {}

(1) Tout élément ayant une classe fa étant enfant d'un élément button n'ayant pas de classe btn-color

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

:not(.btn-color) > .fa  {}

(2) Tout élément ayant une classe fa étant enfant direct d'un élément quelconque n'ayant pas de classe btn-color.

La nuance est subtile mais existe, dans le cas (2) les éléments parent sont donc, par exemple, html, head, meta, title, link, style, script, body etc (relire l'intervention de Watilin)

Puisque tu es hyper calé ... je me permet de te soumettre un complément de solution :

La flaterie ne sert à rien , ce qu'il faut c'est prendre le temps de lire et de comprendre le fonctionnement et la philosophie de la cascade.
Quant à la solution que tu soumets, je pense que tu parles plutôt de question !

ça devient tordu.

Quand cela devient trop « tordu », il ne faut pas hésiter à créer des classes qui permettent de faire du regroupement.

[french-petzouille]

merci pour ton aide .
je maintien que tu es bigrement calé.
j'ai opté pour mettre une classe supplémentaire aux éléments que je ne veux pas affecter par ta formule initiale.
du coup ... je m'en sors avec cela :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

:not(.btn-color)> .fa:not(.original){color:<?= $_SESSION['Users']['bckgiconescolor'];?>;}

mouchas gracias