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>