Comment modifier <li> éléments qui ne sont PAS actifs avec de la pure CSS?

Je comprends comment faire pour modifier la description d'un actif <li> élément

li:active {
...declarations...
}

Mais comment puis-je changer tous les autres éléments qui ne sont PAS actifs?

Par exemple, tous mes éléments sont en gras, mais quand je sélectionne l'un d'entre eux, tous les autres sont modifié pour revenir à la normale.

Merci!

OriginalL'auteur Roberto | 2010-12-06

  1. 7

    J'imagine li:not(:active) devrait au moins théoriquement travail.

    woah.... intéressant.....
    +1 Oui, mais c'est CSS3 uniquement si sa réponse est beaucoup plus compatible.
    Hum. :not a été autour depuis si longtemps, je pensais que c'était CSS 2(.1). Merci pour cette remarque.
    Tu veux dire en jQuery? Ouais, parce que les sélecteurs jQuery sont adaptés de CSS3 🙂
    Non, je veux dire dans le CSS. Peut-être pas pris en charge par les navigateurs, mais encore "autour" (disons, comme :hover a été autour depuis des siècles, mais il a fallu des années pour IE pour démarrer la prise en charge correctement)

    OriginalL'auteur Matti Virkkunen

  2. 5

    Appliquer une règle à TOUS d'entre eux, puis d'appliquer une règle différente pour les actifs.

    li {
   color: blue;
}

li:active {
  color: red;
}

    Résultat: l'onu, les actifs sont bleu.

    +1 Une bonne alternative à la CSS3 uniquement :not() pseudo-classe. Ce qui fait plus de sens que parce que les éléments doivent être inactif par défaut de toute façon.
    Si je comprends l'exemple correctement ce ne sera pas le travail demandé.
    correcte, pas exactement ce que l'OP veut.
    Merci Brad, mais ça ne marche pas. Dans votre exemple, tous les éléments sont en bleu. Ce que je recherche c'est qu'ils deviennent bleu une fois l'élément devient actif.

    OriginalL'auteur Brad

  3. 2

    Si je comprends bien, cela devrait le faire,

    li{  font-weight:bold; }

:active li{ font-weight: normal; }

:active li:active{ font-weight: bold; }

    Donc, fondamentalement, vous voulez un état actif sur le parent, qui passe tout à la normale, puis remplacer que pour le li, qui est également actif.

    Allez-y les gars c'est la réponse, non?
    Hmmm, bonne réflexion. +1
    Mais le ul élément compter comme active si un enfant li est active? Le temps de la tester, bonne idée en effet
    Semble donc, oui, l'élément que vous êtes en cliquant sur et tous ses parents ont de l'état actif déclenche. C'est la même chose avec un hover.

    OriginalL'auteur davidbuttar

  4. 1

    Après relecture de votre question, je pense que la vraie réponse est que vous ne pouvez pas utiliser les CSS seul à contrôler la façon dont les éléments se comportent sur l'interaction de l'utilisateur.

    Je me rends compte que cela ne fonctionnera pas parce que les styles sont appliqués immédiatement, et les éléments dans le DOM sont généralement pas :active par défaut:

    li {
    font-weight: bold;
}

li:not(:active) {
    font-weight: normal;
}

    Plus, :not() est un CSS3 pseudo-classe, de sorte que le support est assez pauvre pour l'instant, si vous avez de compte pour les anciens navigateurs.

    Peut-être que vous pouvez le faire avec du JavaScript (j'utilise jQuery ici)...

    $('li').click(function() {
    $(this).siblings().css('font-weight', 'normal');
});
    Merci! L' :non() pseudo-classe est exactement ce que je cherchais. Testé sur FF3, Chrome et IE8. IE8 ne le supporte pas, mais c'est ok.
    Entendez-vous à l'aide de CSS :not() seul ne fonctionne pas comme prévu?
    "Je me rends compte que cela ne fonctionnera pas parce que les styles sont appliqués immédiatement, et les éléments dans le DOM sont généralement pas active par défaut:" Encore un lien n'est jamais plané par défaut au moment de la feuille de style des charges, mais :hover fonctionne parfaitement bien? Vous ne savez pas si votre argument est valide. Je suis d'accord sur la solution tho, mais peut-être pour une autre raison 😛
    La poisse! Non, il ne fonctionne pas. J'ai parlé trop vite.

    OriginalL'auteur BoltClock

  5. 0

    Pour développer de Brad répondre en fonction de votre exemple:

    Vous voulez que tous les <li>s'en gras, jusqu'à ce que l'on est cliqué, droit? Commencez avec:

    li { 
  font-weight: bold; 
}

    Puis, si un élément de la liste est cliqué garder qu'un audacieux, mais les autres régulier:

    li:active ~ li {
  font-weight: normal;
}

    L' ~ sélectionne tous les éléments qui sont les frères et sœurs de l'actif li, sans sélectionner l'actif lui-même.

    ~ sélectionne les frères et sœurs qui ne viennent après active li. Je vois votre point de vue sur ce que l'OP s'attend à ce que...
    est le ~ CSS3 ou CSS2.x?
    hmm, vraiment? bah, je suppose que ce ne sera pas non plus alors.
    CSS3, mais pris en charge par tous les navigateurs sauf IE6: quirksmode.org/css/contents.html#CSS3
    C'est du CSS3.

    OriginalL'auteur Stephan Muller