web-dev-qa-db-fra.com

Puis-je remplacer un comportement #id ul li par une définition de classe

J'ai un domaine qui est identifié par un #id et il y a un CSS comme:

#id ul li {
    margin:0;
}

puis-je, pour une UL spécifique dans ce domaine, annuler le réglage de la marge? Je comprends que #id crée une très haute priorité dans l’évaluation du formatage.

J'ai essayé:

.myclass ul li {
    margin-left: 20px;
}

et

#id ul.myclass {

aussi bien que

#id li.myclass {

Est-ce même possible?

csscss-selectors
16
thoni56

Je suis d'accord avec SWilk, évitez si possible !important (et c'est possible ici). SWilk n’a pas proposé d’autres solutions:

#id ul.myclass li {

ou...

#id ul li.myclass {

La clé consiste à augmenter la spécificité du sélecteur, ce qui est le cas ci-dessus, ainsi que les solutions de SWilk. La raison pour laquelle vos solutions initiales n’ont pas fonctionné est que vous n’avez pas inclus l’autre balise (ul ou li) ni le #id avec l’ajout du .myclass. 

Ajouté après votre commentaire qui a montré la structure:

Si votre code HTML est le suivant (comme vous l'avez indiqué dans votre commentaire):

<div id="ja-col2">
  <div>.... 
    <ul class="latestnews">
      <li class="latestnews">

Et votre css actuel est (comme indiqué dans un autre commentaire):

#ja-col1 ul li, 
  #ja-col2 ul li { 
    margin:0; padding-left:15px; 
  } 
#ja-col2 .latestnews ul li, /*does not exist*/
  .latestnews #ja-col2 ul li, /*does not exist*/
  .latestnews ul li, /*does not exist*/
  ul.latestnews li.latestnews { 
     list-style:disc outside url("../images/bullet.gif"); 
     margin-left:15px; padding-left:15px; 
  } 
ul li { line-height:180%; margin-left:30px; }

Si vous ne voyez aucun changement, c'est parce que trois de vos chemins de sélecteur n'existent pas dans votre structure HTML et que celui qui gagne par spécificité est le tout premier groupe. Vous avez besoin:

#ja-col2 ul.latestnews li

Pour remplacer le #ja-col2 ul li.

19
ScottS
.myclass ul li {
    margin-left: 20px !important;
}

Devrait faire le tour :)

5
HurnsMobile

Évitez d'utiliser! Important . Cela est difficile à déboguer et il est très probable que cela interfère avec les autres sélecteurs. Surtout si vous essayez de modifier les CSS dans quelques mois à partir de maintenant, quand vous oublierez qu'il y avait une clause! Importante à un endroit donné.

Vous devez mettre un sélecteur plus spécifique que le précédent. Utilisez simplement les classes et id dans un sélecteur.

Essayez d'utiliser soit 

#id .myclass ul li {
    margin-left: 20px;
}

ou 

.myclass #id  ul li {
    margin-left: 20px;
}

en fonction de l'emplacement de l'élément avec la classe "myclass" dans l'arborescence DOM - s'il s'agit du parent de l'élément #id, utilisez le premier exemple, sinon le second. Si vous souhaitez être indépendant de #id élément, essayez d'utiliser:

#id .myclass ul li,
.myclass #id ul li,
.myclass ul li {
    margin-left: 20px;
}

Cela fonctionnera pour tous les liens présents dans ul dans l'élément .myclass, et peu importe qu'il y ait ou non un élément #id dans l'arborescence.

Cordialement, SWilk

2
SWilk

Utiliser pseudo faux: pas d'identifiant 

.myclass:not(#f) ul li {
    margin-left: 20px;
}


#hello .hello-in{
  color:red;
}

.hello-in:not(#f){
  color:blue;
}
<div id="hello">
  <div class="hello-in">
   Hello I am red
  </div>
</div>

vous pouvez même utiliser :not(#♥) ou n’importe quel caractère html4/5 (dépend du type de page)

0
Benn

http://www.w3.org/TR/WCAG10-CSS-TECHS/#user-override

Pour que les utilisateurs puissent contrôler les styles, CSS2 modifie la sémantique de l'opérateur "! Important" défini dans CSS1. Dans CSS1, les auteurs avaient toujours le dernier mot sur les styles. En CSS2, si la feuille de style d'un utilisateur contient "! Important", elle prévaut sur toute règle applicable de la feuille de style d'un auteur. Il s'agit d'une fonctionnalité importante pour les utilisateurs qui ont besoin ou doivent éviter certaines combinaisons de couleurs ou certains contrastes, ceux qui ont besoin de grandes polices, etc.

P { font-size: 24pt ! important }
0
Gavrisimo