Selettore CSS per un elemento avente classe .a e classe .b

Question

Devo progettare un elemento che abbia sia la classe .a che la classe .b . Come lo faccio?

L'ordine in cui le classi compaiono nell'HTML può variare.

<style>
    div.a ? div.b {
        color:#f00;
    }
</style>
<div class="a">text not red</div>
<div class="b">text not red</div>
<div class="a b">red text</div>
<div class="b a">red text</div>

Answer 1

Questo è del tutto possibile. Se specifichi due classi su un elemento (senza spazi), ciò significa che deve avere entrambi per applicare la regola.

div.a {
  color: blue;
}
div.b {
  color: green;
}
div.a.b {
  color: red;
}

<div class="a">
  A
</div>
<div class="b">
  B
</div>
<div class="a b">
  AB
</div>

Answer 2

I selettori di classe possono essere combinati:

div.a.b {
  color: red;
}

Citando da le specifiche :

  

Per abbinare un sottoinsieme di " class " valori, ogni valore deve essere preceduto da un ". " ;.

     

Ad esempio, la seguente regola corrisponde a qualsiasi elemento P la cui "classe" è quotata All'attributo è stato assegnato un elenco di valori separati da spazio che include "pastorale" e " marine " ;:

p.marine.pastoral { color: green }

     

Questa regola corrisponde quando class = " pastoral blue aqua marine " ma non corrisponde per class = " pastoral blue " .

Answer 3

div[class~="a"][class~="b"]{
color:#f00;
}

Answer 4

/ * seleziona tag div con classe aeb insieme * /

 <style>
    div.a.b
    { 
         color:#f00;
    }
    </style>
    <div class="a">text not red</div>
    <div class="b">text not red</div>
    <div class="a b">red text</div>
    <div class="b a">red text</div>

Answer 5

Sì, usa una classe comune o, perché no, JavaScript se il contenuto cambia in modo dinamico