Selectors CSS

Els Selectors CSS defineixen els elements als quals s'aplica un conjunt de normes CSS.

Selector de tipus

Selecciona tots els elements que coincideixen amb el nom del node donat.
Sintaxi: eltname
Exemple: input coincidirà amb qualsevol element <input>

Selector de clase

Selecciona tots els elements que tenen l'atribut class donat.
Sintaxi: .classname
Exemple: .index coincidirà amb qualsevol element que tingui una classe "index"

Selector de ID

Selecciona un element basat en el valor del seu atribut id. Només hi ha d'haver un element amb una ID determinat en un document.
Sintaxi: #idname
Exemple: #toc coincidiran amb l'element que té l'ID "toc".

Selector universal

Selecciona tots els elements. De manera opcional, pot estar restringit a un espai de noms específic o a tots els espais de noms.
Sintaxi: * ns|* *|*
Exemple: * coincideix amb tots els elements del document.

Selector d'atribut

Selecciona elements basats en el valor de l'atribut donat.
Sintaxi: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Exemple: [autoplay] coincidiran tots els elements que tenen establert l'atribut autoplay (a qualsevol valor).

Combinador de germans adjacents

El combinador + selecciona els germans adjacents. Això significa que el segon element segueix directament el primer, i ambdós comparteixen el mateix pare.
Sintaxi: A + B
Exemple: h2 + p coincidirà amb tots el elements <p> que segueixen directament un <h2>.

Combinador general de germans

El combinador ~ selecciona els germans. Això significa que el segon element segueix el primer (encara que no necessàriament de forma immediata), i tots dos comparteixen el mateix pare.
Sintaxi: A ~ B
Exemple: p ~ span coincidirà amb tots els elements <span> que segueixen un <p>.

Combinador de fills

El combinador > selecciona els nodes que són fills directes del primer element.
Sintaxi: A > B
Exemple: ul > li coincidirà amb tots els elements <li> que estan niats directament dins d'un element <ul>.

Combinador de descendents

El combinador    selecciona els nodes que són descendents del primer element.
Sintaxi: A B
Exemple: div span coincidirà amb tots els elements <span> que es troben dins d'un element <div>.

Pseudo-classes permeten la selecció d'elements basats en informació d'estat que no es troba a l'arbre del document.

Exemple: a:visited coincidirà amb tots els elements <a> que hagi visitat l'usuari.

Pseudo-elements representen entitats que no estan incloses en HTML.

Exemple: p::first-line coincidirà amb la primera línia de tots els elements <p>.