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.