IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Selector : "ne contient pas"


Sujet :

CSS

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2005
    Messages
    87
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 87
    Par défaut Selector : "ne contient pas"
    Bonjour

    le préfixe est CSS2 mais peut être que la solution existe en CSS3...

    Je cherche a appliquer un :hover sur un élément HTML qui ne contient pas un motif.
    j'ai testé en vain des syntaxes telles que :
    et cherché sur des sites comme notre cher developpez.com (rien),
    sur w3school.com rien.

    Donc je me dis que que si aucune ressource n'en parle c'est que cette instruction CSS n'existe pas.
    Je peux faire les choses de façon inverse, mais je voulais quand même savoir si le "not contains" peut exister d'une quelconque façon en CSS.

    Je tente le coup avec ce nouveau post, sait on jamais.

    merci pour vos lumières.

  2. #2
    Membre émérite Avatar de fallais
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Juillet 2006
    Messages
    858
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux

    Informations forums :
    Inscription : Juillet 2006
    Messages : 858
    Par défaut
    Personnellement, je n'ai jamais vu cette syntaxe. De plus, j'ai beaucoup de mal à voir l'utilité d'une telle fonction..

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2005
    Messages
    87
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2005
    Messages : 87
    Par défaut
    exemple :
    j'ai une liste de 10 d'onglet :
    parmi ces onglets, seul 1 est actif
    Tous les onglets sauf l'actif on un effet hover.
    l'onglet actif a 2 classes : class="item actif"
    les autres ont seulement un 1 class : class="item"

    Dans ce cas, ça serait bien pratique d'avoir une instruction tel que :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    a.item {
       color: #000000;
    }
     
    a.item[classe_qui contient_pas_"actif"]:hover {
     color: #ff0000;
    }
     
    a.item[classe_qui contient_"actif"]:hover {
     color: #000000;
    }
    Voila c'est une manière d'illustrer ma problématique, même si c'est peut être pas l'exemple des plus logiques ou plus flagrant.

  4. #4
    Expert confirmé
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Par défaut
    Bonjour

    Oui c'est bien en CSS 3 que tu vas trouver la pseudo classe :not

    Par exemple :not(div) applique son style à tous les éléments qui ne sont pas des div.

    Dans ton cas ce serait un truc du genre : :not(.actif):hoveroù .actif correspond à la classe à exclure.

    Fonctionne avec Firefox 4 (a voir pour les autres : fonctionne normalement avec tous les navigateurs récents sauf IE (IE 9 je ne sais pas)).

    Tu le trouvera dans ce tutoriel : http://debray-jerome.developpez.com/...teurs-en-css3/

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo