MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Selectors CSS

This translation is incomplete. Please help translate this article from English.

Els Selectors defineixen a quins elements s'aplica un conjunt de regles CSS.

Selectors Bàsics

Selectors de Tipus
Aquest selector bàsic tria tots els elements que coincideixen amb el name especificat.
Sintaxi: eltname
Exemple: input coincidirà amb qualsevol element <input>
Selectors Class
Aquest selector bàsic tria elements basats en el valor del seu atribut class.
Sintaxi: .classname
Exemple: .index coincidirà amb qualsevol element que tingui la classe index (probablement definit per un atribut class="index" o similar).
Selectors ID
Aquest selector bàsic tria nodes basats en el valor del seu atribut id. Solament pot haver-hi un element amb un ID donat en un document.
Sintaxi: #idname
Exemple: #toc coincidirà amb l'element que té el id toc (probablement definit per un atribut id="toc" o similar).
Selectors Universal
Aquest selector bàsic tria tots els nodes. També existeix en un espai de noms únic i en una variant d'espai de noms.
Sintaxi: * ns|* *|*
Exemple: * coincidirà amb tots els elements del document.
Selectors d'Atribut
Aquest selector bàsic tria nodes basats en el valor d'un dels seus atributs.
Sintaxi: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Exemple: [autoplay] coincidirà amb tots els elements que tenen establert l'atribut autoplay (a qualsevol valor).

Combinadors

Selectors de germans adjacents
El combinador '+' selecciona els nodes que segueixen immediatament a l'element especificat anteriorment.
Sintaxi: A + B
Exemple: ul + li coincidirà amb qualsevol <li> que segueix immediatament a <ul>.
Selectors de germans general
El combinador '~' selecciona els nodes que segueixen (no necessàriament immediatament), el anterior element especificat, si els dos elements comparteixen el mateix pare.
Sintaxi: A ~ B
Exemple: p ~ span coincidirà amb tots els elements <span> que segueixen a un element <p> dins d'un mateix element.
Selectors de fills
El combinador '>' selecciona els nodes que són fills directes de l'anterior element especificat.
Sintaxi: A > B
Exemple: ul > li coincidirà amb tots els elements <li> que estan dins d'un <ul>.
Selectors de descendents
El combinador ' ' selecciona els nodes que són els fillss (no cal fills directes) de l'anterior element especificat.
Sintaxi: A B
Exemple: div span coincidirà amb qualsevol element <span> que està dins d'un element<div>.

Pseudo-elements

Pseudo-elements són abstraccions de l'arbre que representen entitats més enllà del que fa l'HTML. Per exemple, l'HTML no té un element descrivint la primera lletra o línia d'un paràgraf o el marcador d'una llista. Els pseudo-elements representen aquestes entitats i permeten a les regles CSS associar-se amb ells. D'aquesta manera, aquestes entitats poden ser d'estil independent.

Pseudo-classes

Pseudo-classes permeten seleccionar elements en funció de la informació que no està continguda en l'arbre del document com un estat o que és particularment complex per extreure. Per exemple. coincidint si un enllaç s'ha visitat prèviament o no.

Especificacions

Especificació Estat Comentari
Selectors Level 4 Working Draft  
Selectors Level 3 Recommendation  
CSS Level 2 (Revision 1) Recommendation  
CSS Level 1 Recommendation Definició inicial

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1 1.0 (1.7 or earlier) 3.0 3.5 1.0
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 1.5 1.0 (1.9.2) ? ? 3.2

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,