CSS “et” sélecteur de - puis-je sélectionner les éléments qui ont plusieurs classes?

Je suis en train de sélectionner tous les éléments qui ont à la fois .checked et .featured balises. Donc, fondamentalement, ce que je cherche est un "et" sélecteur; je ne sais pas si il y en a un ou pas.

Est-il une solution de contournement pour ce type de cas?

  • est-il css collections sélecteur comme ce .main [:hover,ul,ul>li,p] { display:inline-block;}
InformationsquelleAutor Mia | 2013-01-30
  1. 103

    Vous utilisez à la fois (sans espace entre eux)

    .checked.featured{
   // ...
}

    Référence: http://www.w3.org/TR/selectors/#class-html

    Exemple

    CSS:

    div{margin:1em;padding:1em;}

.checked{color:green;}
.featured{border:1px solid #ddd;}

.checked.featured{
       font-weight:bold;
    }

    HTML:

    <div class="checked">element with checked class</div>
<div class="featured">element with featured class</div>
<div class="featured checked">element with both checked and featured classes</div>

    • Sitepoint de référence semble un peu plus facile à analyser (OMI, évidemment): reference.sitepoint.com/css/classselector
    • est-il une manière similaire à joindre les deux sélecteurs d'ID comme ça? J'ai essayé #tarte#barres de table {} (deux tables dans deux Identifiants différents). Mais cela ne fonctionne pas.
    • ce que vous décrivez est plusieurs sélecteurs. Il suffit d'utiliser une virgule avec le plein sélecteur à chaque fois. #pie table, #bars table {}
    • De sorte '.cochée.en vedette' ne sélectionne que des objets qui ont les deux classes?
    • oui, c'est ce que la question initiale est d'environ.
    • Comment cela fonctionne avec par exemple h4 et h5 ?
    • que voulez-vous dire exactement ? Si tu veux l'appliquer à h4 et h5 éléments qui ont à la fois des classes alors h4.checked.featured, h5.checked.featured{...} vous devez utiliser , pour plusieurs sélecteurs

    InformationsquelleAutor Gabriele Petrioli
  2. 15

    Vous pouvez simplement le "rejoindre" deux classes comme ça: .checked.featured

    InformationsquelleAutor Moseleyi
  3. 9

    Exprimer ET il vous suffit de concaténer vos classes .checked.featured qui ne peuvent pas être confondu avec le populaire .checked .featured qui est le sélecteur de descendant.

    Ont un look à la officiel La Documentation

    • Merci pour la réponse!
    • est-il css collections sélecteur comme ce .main [:hover,ul,ul>li,p] { display:inline-block;
    • jetez un oeil à la css4 sélecteur :correspond à()
    • wow...je me demande quand il va être ici.
    InformationsquelleAutor Christoph