selettori - Selettore CSS che si applica agli elementi con due classi



selettori combinatori (1)

Associa entrambi i selettori di classe (senza uno spazio intermedio):

.foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}

Se hai ancora a che fare con browser antichi come IE6, tieni presente che non legge correttamente i selettori di classi concatenate: leggerà solo l' ultimo selettore di classe ( .bar in questo caso), indipendentemente da quali altre classi tu elencherai .

Per illustrare come altri browser e IE6 interpretano ciò, considera questo CSS:

* {
    color: black;
}

.foo.bar {
    color: red;
}

L'output sui browser supportati è:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Not selected, black text [3] -->

L'output su IE6 è:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Selected, red text [2] -->

Note:

  • Browser supportati:
    1. Non selezionato come questo elemento ha solo la classe foo .
    2. Selezionato come questo elemento ha entrambe le classi foo e bar .
    3. Non selezionato in quanto questo elemento ha solo la bar classe.

  • IE6:
    1. Non selezionato in quanto questo elemento non ha la bar classe.
    2. Selezionato come questo elemento ha la bar classe, indipendentemente da qualsiasi altra classe elencata.

C'è un modo per selezionare un elemento con CSS in base al valore dell'attributo di classe impostato su due classi specifiche. Ad esempio, supponiamo di avere 3 div:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

Quale CSS posso scrivere per selezionare SOLO il secondo elemento nell'elenco, in base al fatto che è membro di entrambe le classi foo AND bar?





css-selectors