[Résolu] Sélecteur :not() et sélecteur d’attribut

Salut.

J’ai besoin d’empêcher le hover sur les boutons disabled. J’ai testé :

.toto:not([disabled]):hover {}

Mais cela ne fonctionne pas alors que :

.toto:not(.disabled):hover {}

fonctionne.

Il est impossible de mettre un sélecteur d’attribut dans un :not() ?

Merci.

Je viens de faire le test avec un simple disabled, et ça fonctionne (Chrome 67)
Est-ce que ton attribut n'est pas plus disabled="disabled" ?

Pas testé sur Chrome, mais sur Safari 11.1.1 uniquement pour l’instant. J’ai essayé les 2 cas et cela ne semble pas fonctionné. Par contre j’ai inversé le problème et cela fonctionne :

.toto:enabled:hover

Merci !
Modifié par Derwoed (29 Jun 2018 - 15:51)

Essaie ceci vu que disabled est un status pour le node :

.toto:not(:disabled):hover { background: red; }

Voir les 2 points devant disabled

Testé sur Safari 11.1 aussi et ça fonctionne pour moi…

@Yordi
Oui, dans ton exemple cela fonctionne pour moi aussi. Le problème doit venir de mon CSS…

@bazooka07
Oui, effectivement, cela devrait aussi fonctionner. Entre toutes les possibilités (:enabled, :disabled et ) j’ai de quoi faire. Reste à trouver celui qui me conviendra le mieux…

Encore merci en tout cas…

Si tu n'y arrives pas donne une URL.
Je jetterai un oeil avec l'inspecteur de code de Firefox ou de Chrome (touche F12 si tu veux essayer)

Hum, mon problème est lié à la combinaison de sélecteurs :

.toto:not(.su-disabled):hover,
.toto:not([disabled]):hover {
            background: red;
        }

En fait, avec ça, si j’ai un bouton avec "disabled", ".toto:not(.su-disabled):hover" prend la main et j’ai quand même un hover (et vice-versa).

La solution serait :

.toto:not(.su-disabled, [disabled]):hover {
            background: red;
        }

Mais cela ne fonctionne que sur Safari…

Du coup, je ne vois qu’une solution qui va alourdir le code : plutôt que d’empêcher le hover quand l’élément est disabled ou .su-disabled, il faut que je le surcharge avec le style non hover…
Modifié par Derwoed (29 Jun 2018 - 16:27)

Bon, voici le résultat qui fonctionne (à l’ancienne), même si cela ne me plait pas :

.toto {
            background: blue;
        }
.toto:hover,
.toto:focus {
            background: red;
        }
.toto.su-disabled,
.toto[disabled] {
        opacity: .2;
      }
.toto.su-disabled:hover,
.toto[disabled]:hover, {
            background: blue;
     }

A multiplier par le nombre de type de boutons…
Modifié par Derwoed (29 Jun 2018 - 16:54)

Le plus simple serait de rajouter/retirer une class à ton élément quand tu mets disabled à true

@bazooka07
Oui, c’est à ça que sert .su-disabled, mais je voulais ceinture et bretelles. Les devs avec qui je bosse ne sont pas toujours sensibles à la beauté des classes…
Modifié par Derwoed (29 Jun 2018 - 17:18)