Attribuer css à l'élément spécifique

J'ai un <li> élément sur la page que je veux regarder une certaine manière. Changer le css affecte tous les <li> éléments.

ici, c'est l'élément que je veux changer

<li>Outside Job<span class="toggle"<input type="checkbox" /></span></li>

voici mon css pour la <ul><li>

ul li {
    /*font: normal 17px Helvetica;*/
    color: #a9a9a9;
    border-top: 1px solid #333;
    border-bottom: #555858;
    list-style-type: none;
    padding: 10px 10px 10px 10px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
    overflow: hidden;}

Le commentaire sur la police et la couleur est ce que je veux affecter cette <li> et pas les autres.

Comment puis-je faire? Merci!!!!

  • Juste un avis, ce CSS concept est couvert sur de nombreux tutoriels CSS facilement trouvé avec une recherche sur google.
  • oui, je sais que c'est, mais je n'avais aucune idée où commencer ma recherche
InformationsquelleAutor shaiss | 2009-11-06
  1. 13

    Si vous pouvez mettre un id ou une classe sur la LI, alors il serait trivial..

    ul li {
    color: #a9a9a9;
    border-top: 1px solid #333;
    border-bottom: #555858;
    list-style-type: none;
    padding: 10px 10px 10px 10px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142));
    overflow: hidden;
}

ul li.special {
    font: normal 17px Helvetica;
}

<li class="special">Outside Job<span class="toggle"><input type="checkbox" /></span></li>

    A côté de cela, il n'y a pas de moyen simple de le faire de la cross-browser avec css seul.

    • Merci, c'est ce que je cherchais!
    • Comme Quintin souligné. Vous devez définir l'attribut de classe pour les <li> tag.
    • W3schools est jamais un mauvais choix w3schools.com/Css/css_syntax.asp
    InformationsquelleAutor Quintin Robinson
  2. 3

    Fondamentalement, vous avez juste besoin de donner un supplément d'identité ou d'un attribut de sorte que vous pouvez avoir un sélecteur CSS pour le style que li tag. Exemple: 

    /*using class*/
ul li.different {font: normal 17px Helvetica;}

/*using attribute, title in this case*/
ul li[title=diff] {font: normal 17px Helvetica;}

/*using id if it's one and only*/
#id {font: normal 17px Helvetica;}
    InformationsquelleAutor o.k.w
  3. 1

    Ou d'utiliser une ligne de style, STYLE= sur la LI lui-même:

    <li style="font: Helvetica; color: #a9a9a9;">...</li>

    • Ce n'est pas une bonne idée pour les couples du contenu et de la présentation dans le même fichier -- vous ne pouvez pas changer de style sans modifier le contenu.
    InformationsquelleAutor James Sutherland
  4. 1

    Sur une note de côté, vous devez probablement penser à ajouter des supplémentaires de secours des polices sans serif pour que la règle outre Helvetica. Je suis un grand fan de ce type de caractères, mais la plupart des gens ne l'ont pas sur leurs ordinateurs.

    EDIT: Quelqu'un a posté ma réponse pendant que j'écrivais celui-ci. Je vais garder le passage, mais parce que sa durée.

    InformationsquelleAutor Ryan Lynch
  5. 0

    Comme dit précédemment, soit une classe ou un id de le faire - en fonction de savoir si vous allez être en utilisant ce style particulier uniquelly pour cet élément de la liste, ou prévoyez de l'utiliser ailleurs (bien que vous ne pouvez utiliser un id d'une fois sur une page, vous pouvez réutiliser un id sur une autre page).

    Vous pouvez mélanger et assortir les classes et les id dans une liste, de sorte que même si vous voulez des styles différents pour chaque élément de la liste dans votre liste, vous pouvez le faire à l'aide de différentes classes et les id.

    Par exemple, vous pouvez avoir votre style de styles de votre liste par défaut, de sorte que les éléments avec aucune classe ou l'id d'hériter le style par défaut, et ensuite n'importe quel nombre de classes et les id qui permet de contrôler les éléments individuels... 

    <code><pre>
    <ul>
      <li>blah blah blah</li>
      <li class="special">blah blah blah</li>
      <li class="special">blah blah blah</li>
      <li id "extraspecial">blah blah blah</li>
      <li>blah blah blah</li>
    </ul>
</pre></code>
    • <code> et <pre> ne sont pas correctement imbriqués. Merci de corriger.
    InformationsquelleAutor BlissC