web-dev-qa-db-fra.com

Couleur de fond d'élément de liste de modifications CSS avec classe

J'essaie de changer la couleur d'arrière-plan d'un élément de la liste alors qu'il existe une autre couleur d'arrière-plan pour les autres éléments de la liste.

Voici ce que j'ai

<style type="text/css">
    
ul.nav li
{
  display:inline;
  padding:1em;
  margin:1em;
  background-color:blue;
}
    
    
.selected
{
  background-color:red;
}
   
<ul class="nav">
 <li>Category 1</li>
 <li>Category 2</li>
 <li class="selected">Category 3</li>
 <li>Category 4</li>
</ul>

Cela produit tous les éléments de la liste avec un arrière-plan bleu (de la classe "nav"), comme s'il n'y avait pas de classe "sélectionnée". Cependant, lorsque je retire la couleur de fond de la classe "nav", le fond rouge de l'élément de liste s'affiche avec la classe "sélectionné". 

Je voudrais utiliser la classe "sélectionné" pour d’autres éléments de la page (c’est-à-dire d’autres éléments de la liste, divs, etc.).

Comment pourrais-je résoudre ce problème?

Merci d'avance.

csscolorsbackgroundhtml-lists
11
user614972

C'est un problème de spécificité de sélecteur . (Le sélecteur .selected est moins spécifique que ul.nav li.)

Pour résoudre ce problème, utilisez autant de spécificité dans la règle de substitution que dans la règle d'origine:

ul.nav li {
 background-color:blue;
}
ul.nav li.selected {
 background-color:red;
}

Vous pouvez également envisager de nier la ul, sauf s’il y aura d’autres .navs. Alors:

.nav li {
 background-color:blue;
}
.nav li.selected {
 background-color:red;
}

C'est un peu plus propre, moins de dactylographie et moins de bits.

16
D_N

Ul.nav li est plus restrictif et a donc priorité, essayez ceci:

ul.nav li.selected {  
  background-color:red; 
}
2
Fernando Diaz Garrido

Démo en direct

Si vous souhaitez que ceci soit mis en surbrillance en fonction de la page sur laquelle votre utilisateur se trouve, procédez comme suit:

Pour mettre automatiquement en surbrillance votre courant navigation, commencez par étiqueter vos balises body avec un identifiant ou une classe qui correspond à la section du site (généralement un répertoire ) dans laquelle se trouve la page.

<body class="ab">

Nous étiquetons tous les fichiers dans "/about/" répertoire avec la classe "ab". Remarque que nous utilisons une classe ici pour étiqueter le étiquettes de corps. Nous avons trouvé cela en utilisant un ID dans le corps ne fonctionnait pas systématiquement dans certains navigateurs plus anciens. Ensuite, nous étiquetons nos éléments de menu afin que nous puissions les cibler individuellement ainsi:

<div id="n"> <a class="b" id="hm"
href="/">Home</a> ... <a class="b"
id="ab" href="/about/">About</a> ...
</div>

Notez que nous utilisons la classe "b" utton pour étiqueter les éléments de menu comme des boutons et un identifiant ("ab") pour étiqueter chaque élément de menu unique (dans ce cas à propos de). Maintenant tout ce dont nous avons besoin est un sélecteur CSS qui correspond au étiquette du corps avec le menu approprié étiquette comme ceci:

body.ab #n #ab, body.ab #n #ab
a{color:#333;background:#dcdcdc;text-decoration:none;}

Ce code met effectivement en évidence le "À propos de" dans le menu et le fait apparaître gris foncé. Lorsque vous étiquetez le reste de le site et les éléments de menu, vous finirez par avec un sélecteur groupé qui ressemble quelque chose comme ça:

body.hm #n #hm, body.hm #n #hm a,
body.sm #n #sm, body.sm #n #sm a,
body.is #n #is, body.is #n #is a,
body.ab #n #ab, body.ab #n #ab a, 
body.ct #n #ct, body.ct #n #ct
a{color:#333;background:#dcdcdc;text-decoration:none;}

Par exemple, lorsque l'utilisateur accède à la section sitemap le .sm classé La balise body correspond à l'option de menu #sm et déclenche la surbrillance CSS du fichier "Plan du site" dans la barre de navigation.

La source

1
Myles Gray

Scénario: J'ai un menu de navigation comme celui-ci. Remarque: Lien <a> is child of list item <li>. Je voulais changer l'arrière-plan de l'élément de liste sélectionné et supprimer la couleur d'arrière-plan de l'élément de liste non sélectionné.

<nav>
        <ul>
            <li><a href="#">Intro</a></li>
            <li><a href="#">Size</a></li>
            <li><a href="#">Play</a></li>
            <li><a href="#">Food</a></li>
        </ul>
        <div class="clear"></div>

       </nav>

J'ai essayé d'ajouter une classe .active dans l'élément de liste à l'aide de jQuery mais cela ne fonctionnait pas

.active
{
    background-color: #480048;
}

$("nav li a").click(function () {
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
    });

Solution: En gros, utiliser la classe .active pour changer la couleur de fond de l’élément de la liste ne fonctionne pas. J'ai donc changé le nom de la classe css de .active en "nav li.active a", de sorte que le même javascript ajoute la classe .active à l'élément de liste sélectionné. Maintenant, si l'élément de liste <li> a la classe .active, alors css changera la couleur d'arrière-plan de l'enfant de cet élément de liste <a>.

nav li.active a
{
    background-color: #480048;
}
1
Goldfish

1) Vous pouvez utiliser la règle !important, comme ceci:

.selected
{
  background-color:red !important;
}

Voir http://www.w3.org/TR/CSS2/cascade.html#important-rules pour plus d'informations.

2) Dans votre exemple, vous pouvez également obtenir le fond rouge en utilisant ul.nav li.selected au lieu de .selected. Cela rend le sélecteur plus spécifique.

Voir http://www.w3.org/TR/CSS2/cascade.html#specificity pour plus d'informations.

0
DigitalDan