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




combinatori nth-child (2)

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?


Answers

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.

Prova questo :

    .class_name > *:first-child {
        border: 1px solid red;
    }




css css-selectors