Skip to main content
 

Selettori

I selettori CSS possono essere divisi in due categorie. Quelli della prima si applicano direttamente agli elementi che compongono la struttura del documento HTML. Quelli nella seconda si chiamano "pseudo-selectors", e possono agire su elementi e informazioni che non fanno parte della struttura del documento.

Attribute selectors W3 Docs

  • E[attr] { ... style ...} 
    <E attr='a value'>...</E>
  • E[attr='moo'] { ... style ...} 
    <E attr='moo'>...</E>
  • E[attr~='moo'] { ... style ...} 
    <E attr='loo moo boo'>...</E>
  • E[attr|='moo'] { ... style ...} - Questo esempio è usato spesso con il tag 'lang'. Per esempio E[lang|=es] si applica sia a lang='es-ES' sia a lang='es-MX'.
    <E attr='moo'>...</E>
    <E attr='moo-boo'>...</E>
  • E[attr^='moo'] { ... style ...} 
    <E attr='moo and something more'>...</E>
    <E attr='doesn't apply to moo this one'>...</E>
  • E[attr$='moo'] { ... style ...} 
    <E attr='Something here and in the end moo'>...</E>
    <E attr='moo doesn't apply to this one'>...</E>
  • E[attr*='moo'] { ... style ...} 
    <E attr='In then very end moo can be everywhere'>...</E>

Multiple selectors

Possono riferirsi a più attributi per un elemento, oppure più volte per lo stesso attributo.

E[attr^='moo'][attr1$='boo'][attr2~='loo'] { ... style ...}

Sibling selectors W3 Docs

Si applicano a più elemento, quandi si trovano allo stesso livello nella struttura ad albero del documento HTML.

  • E + F { ... style ...} - combinatore adiacente<E> ... </E>
       <F> ... style'll be applied here </F>
       <E> ... </E>
       <G>
          <F> but not here, cause the tree level is different </F>
       </G>
       <E> ... </E>
       <H> ... </H>>
       <F> neither here, cause between E and F there is as H element </F>
  • E ~ F { ... style ...} - combinatore generale<E> ... </E>
      <F> ... style'll be applied here ... </F>
      <E> ... </E>
      <G>
         <F> ... not here, cause the tree level is different ... </F>
      </G>
      <E> ... </E>
      <H> ... </H>>
     <F> ... and style'll be applied here, cause F is following E at the same level, 
         even if it isn't immediately adjacent 
     </F>

CSS3

Diffusione browser