Continguts:

1. Introducció: unificació amb el patró
2. Sintaxi dels selectors
2.1. Agrupació
3. Selector universal
4. Selectors de tipus
5. Selectors de descendent
6. Selectors de fill
7. Selectors de germà adjacent
8. Selectors d'atribut
8.1. Unificar atributs i valors d'atributs
8.2. Valors d'atribut per defecte en les DTDs
8.3. Selectors de classe
9. Selectors ID
10. Pseudo-elements i pseudo-classes
11. Pseudo-classes
11.1. La pseudo-classe :first-child
11.2. Les pseudo-classes de link: :link i :visited
11.3. Les pseudo-classes dinàmiques: :hover, :active i :focus
11.4. La pseudo-classe d'idioma: :lang
12. Pseudo-elements
12.1. El pseudo-element :first-line
12.2. El pseudo-element :first-letter
12.3. Els pseudo-elements :before i :after
1. Introducció: unificació amb el patró
En CSS, les regles d'unificació amb un patró determinen quines regles d'estil s'apliquen als elements de l'arbre del document. Aquests patrons, anomenats selectors, poden abarcar desde simples noms d'element fins a patrons d'un context ric. Si totes les condicions del patró són certes per a un cert element, aleshores el selector unifica amb l'element.

La case-sensibilitat dels noms dels elements del llenguatge del document en els selectors depèn del llenguatge del document. Per exemple, en HTML, els noms dels elements són case-insensitive, però en XML són case-sensitive.

La següent taula sumaritza la sintaxi dels selectors CSS2:

Patró Significat Descrit en
* Unifica amb qualsevol element. Selector
universal
E Unifica amb qualsevol element E (és a dir, un
element del tipus E).
Selectors
de tipus
E F Unifica amb qualsevol element F que sigui un
descendent d'un element E.
Selectors
de descendent
E > F Unifica amb qualsevol element F que sigui un fill
d'un element E.
Selectors
de fill
E:first-child Unifica amb un element E quan E és el primer fill del
seu pare.
Pseudo-classe
:first-child
E:link
E:visited
Unifica amb un element E si E és l'ancla origen d'un
hiperlink el qual no ha estat encara visitat (:link) o ja
ha estat visitat (:visited).
Pseudo-classes
de link
E:active
E:hover
E:focus
Unifica amb E durant certes accions d'usuari. Pseudo-classes
dinàmiques
E:lang(c) Unifica amb un element del tipus E si aquest es troba
en l'idioma (humà) c (el llenguatge del document
especifica com es determina l'idioma).
Pseudo-classe
:lang()
E + F Unifica amb qualsevol element F que estigui
immediatament precedit per un element E.
Selectors de
germà adjacent
E[lolo] Unifica amb qualsevol element E amb l'atribut "lolo"
fixat (sigui quin sigui el valor).
Selectors
d'atribut
E[lolo="warning"] Unifica amb qualsevol element E que tingui l'atribut
"lolo" igual a "warning".
Selectors
d'atribut
E[lolo~="warning"] Unifica amb qualsevol element E que tingui l'atribut
"lolo" igual a una llista de valors separats per espais,
on un d'ells és exactament igual a "warning".
Selectors
d'atribut
E[lang|="en"] Unifica amb qualsevol element E que en el seu
atribut "lang" hi tingui una llista de valors separats
per guions que comenci (desde l'esquerra) amb "en".
Selectors
d'atribut
DIV.warning Només HTML. El mateix que DIV[class~="warning"]. Selectors
de classe
E#elmeuid Unifica amb l'ID d'un element E, que sigui igual a "elmeuid". Selectors ID
2. Sintaxi dels selectors
Un selector simple és un selector de tipus, o bé un selector universal, seguit immediatament per zero o més selectors d'atribut, selectors ID o pseudo-classes, en qualsevol ordre. El selector simple unifica si tots els seus components ho fan.

Un selector és un encadenament d'un o més selectors simples separats per combinadors. Els combinadors són: espai blanc, ">" i "+". L'espai blanc pot aparèixer entre un combinador i els selectors simples que l'envolten.

Els elements de l'arbre del document que unifiquen amb un selector s'anomenen subjectes del selector. Un selector que consisteixi en un sol selector simple unifica amb qualsevol element que satisfaci els seus requeriments. El fet d'afegir un selector simple i un combinador al principi d'un encadenament imposa restriccions addicionals d'unificació, de tal manera que els subjectes d'un selector són sempre un subconjunt dels elements que unifiquen amb el selector simple de més a la dreta.

Un pseudo-element es pot afegir a l'últim selector simple d'un encadenament, en tal cas la informació d'estil s'aplica a una subpart de cada subjecte.
2.1. Agrupació
Quan varis selectors comparteixen les mateixes declaracions, aquests es poden agrupar en una llista separada per comes.

En aquest exemple, condensem tres regles amb declaracions idèntiques en una de sola. Així,
	H1 { font-family: sans-serif }
	H2 { font-family: sans-serif }
	H3 { font-family: sans-serif }
és equivalent a:
	H1, H2, H3 { font-family: sans-serif }

CSS ofereix també altres mecanismes "drecera" que inclou les declaracions múltiples i les propietats drecera.
3. Selector universal
El selector universal, que s'escriu "*", unifica amb el nom de qualsevol tipus d'element. Unifica amb qualsevol element de l'arbre del document.

Si el selector universal no és l`únic component d'un selector simple, es pot ometre el "*". Per exemple:

4. Selectors de tipus
Un selector de tipus unifica amb el nom d'un tipus d'element del llenguatge del document. Un selector de tipus unifica amb cada instància del tipus de l'element de l'arbre del document.

La següent regla unifica amb tots els elements H1 de l'arbre del document:
	H1 { font-family: sans-serif }
5. Selectors de descendent
De vegades, els autors poden voler que els selectors unifiquin amb un element que és el descendent d'un altre element en l'arbre del document (per ex., "Unifica amb aquells elements EM que estiguin continguts dins un element H1"). Els selectors de descendent expressen aquesta relació en un patró. Un selector de descendent consta de dos o més selectors separats per espai en blanc. Un selector de descendent de la forma "A B" unifica quan un element B és un descendent arbitrari d'algun element ancestre A.

Per exemple, considerem les regles següents:
	H1 { color: red }
	EM { color: blue }
Encara que la intenció d'aquestes regles és afegir èmfasi al text canviant el seu color, l'efecte es perderà en un cas com aquest:
	<H1>Aquest títol és <EM>molt</EM> important</H1>
Tractem aquest cas suplint les regles prèvies amb una regla que fixa el color del text a blau, sigui on sigui que apareixi un EM dins d'un H1:
	H1 { color: red }
	EM { color: red }
	H1 EM { color: blue }
La tercera regla unificarà amb l'EM del següent fragment:
   <H1>
     Aquest <SPAN class="classe">títol és <EM>molt</EM> important</SPAN>
   </H1>

El següent selector:
	DIV * P
unifica amb un element P que sigui un nét o un descendent més llunyà d'un element DIV. Remarquem l'espai en blanc en qualsevol costat del "*" es pot obviar.

El selector de la següent regla, el qual combina selectors de descendent i selectors d'atribut, unifica amb qualsevol element que (1) tingui l'atribut "href" inicialitzat i (2) es trobi dins un P que al seu torn es trobi dins un DIV:
	DIV P *[href]
6. Selectors de fill
Un selector de fill unifica quan un element és el fill d'algun element. Un selector de fill consta de dos o més selectors separats per ">".

La següent regla fixa l'estil de tots els elements P que són fills de BODY:
	BODY > P { line-height: 1.3 }
El següent exemple, que combina selectors de descendent i selectors de fill:
	DIV OL>LI P
unifica amb un element P que sigui un descendent d'un LI; l'element LI ha de ser fill d'un element OL; l'element OL ha de ser un descendent d'un DIV. Cal remarcar que l'espai blanc opcional al voltant del combinador ">" ha estat suprimit.

Per a més informació sobre seleccionar el primer fill d'un element consulteu l'apartat sobre la pseudo-classe :first-child.
7. Selectors de germà adjacent
Els selectors germà adjacent tenen la següent sintaxi: E1 + E2, on E2 és el subjecte del selector. El selector unifica si E1 i E2 comparteixen el mateix pare en l'arbre del document i E1 precedeix immediatament E2.

En alguns contextes, els elements adjacents generen objectes formatats la presentació dels quals es tracta automàticament (per ex., col·lapsant els marges verticals entre caixes adjacents). El selector "+" permet als autors especificar estil addicional a elements adjacents.

Així, la següent regla posa de manifest això quan un element P que segueixi immediatament un element MATH no hauria d'estar indentat:
	MATH + P { text-indent: 0 }
El següent exemple redueix l'espai vertical separant un H1 i un H2 que el segueix immediatament:
	H1 + H2 { margin-top: -5mm }
La següent regla és similar a la de l'exemple previ, excepte que aquesta afegeix un selector d'atribut. Així, el formatat especial només succeeix quan H1 té class="opener":
	H1.opener + H2 { margin-top: -5mm }
8. Selectors d'atribut
CSS2 permet als autors especificar regles que unifiquin amb atributs definits en el document font.
8.1. Unificar atributs i valors d'atributs
Els selectors d'atribut poden unificar de quatre maneres:

[att]
Unifica quan l'element inicialitza l'atribut "att", sigui quin sigui el seu valor.
[att=val]
Unifica quan el valor de l'atribut "att" de l'element és exactament "val".
[att~=val]
Unifica quan el valor de l'atribut "att" de l'element és una llista de "paraules" separades per espais, on una de les quals és exactament "val". Si s'utilitza aquest selector, les paraules del valor no han de contenir espais (ja que estan separades per espais).
[att|=val]
Unifica quan el valor de l'atribut "att" de l'element és una llista de "paraules" separades per guions que comença per "val". La unificació sempre comença pel principi del valor de l'atribut. Això està pensat principalment per permetre unificacions amb el subcodi dels llenguatges (per ex., l'atribut "lang" de l'HTML) tal com està descrit en la RFC 1766.


Els valors dels atributs han de ser identificadors o cadenes. La case-sensibilitat dels noms i dels valors dels atributs en els selectors depèn del llenguatge del document.

Per exemple, el següent selector d'atribut unifica amb tots els elements H1 que especifiquen l'atribut "title", sigui quin sigui el seu valor:
	H1[title] { color: blue; }
En el següent exemple, el selector unifica amb tots els elements SPAN l'atribut "class" dels quals tingui exactament el valor "exemple":
	SPAN[class=exemple] { color: blue; }
Es poden utilitzar selectors d'atribut múltiples per tal de referir-se a varis atributs d'un element, o també vàries vegades al mateix atribut.

Aquí, el selector unifica amb tots els elements SPAN l'atribut "hello" dels quals tingui exactament el valor "Cleveland" i que el seu atribut "goodbye" tingui exactament el valor "Columbus".
	SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
Els següents selectors il·lustren les diferències entre "=" i "~ =". El primer selector unificarà, per exemple, amb el valor "copyright copyleft copyeditor" per a l'atribut "rel". El segon selector només unificarà quan l'atribut "href" tingui el valor http://www.algunlloc.org/:
	A[rel~="copyright"]

	A[href="http://www.algunlloc.org/"]
La següent regla amaga tots els elements pels quals el valor de l'atribut "lang" és "fr" (és a dir, l'idioma és el francès):
	*[LANG=fr] { display : none }
La següent regla unificarà per a valors de l'atribut "lang" que comencin amb "en", incloent-hi "en", "en-US", i "en-cockney":
	*[LANG|="en"] { color : red }
Similarment, les següents regles de full d'estil audible permeten llegir en veu alta un script amb diferents veus per a cada rol:
	DIALOGUE[character=romeo]
	   { voice-family: "Lawrence Olivier", charles, male }
	DIALOGUE[character=juliet]
	   { voice-family: "Vivien Leigh", victoria, female }
8.2. Valors d'atribut per defecte en les DTDs
La unificació té lloc en els valors dels atributs de l'arbre del document. Per a llenguatges de document diferents de l'HTML, els valors d'atribut per defecte poden definir-se en una DTD o en qualsevol altre lloc. Els fulls d'estil haurien d'estar dissenyats per tal que funcionin encara que els valors per defecte no estiguin inclosos en l'arbre del document.

Per exemple, considerem un element EXEMPLE amb un atribut "notacio" que té un valor per defecte de "decimal". El fragment de DTD hauria de ser:
	<!ATTLIST EXEMPLE notacio (decimal,octal) "decimal">
Si el full d'estil conté les regles
	EXEMPLE[notacio=decimal] 
	   { /*... incialitzacions de les propietats per defecte...*/ }
	EXEMPLE[notacio=octal] 
	   { /*... altres inicialitzacions ...*/ }
aleshores, per a expressar els casos en què aquest atribut es fixa per defecte, i no explícitament, s'hauria d'afegir aquesta regla:
	EXEMPLE
	     { /*... incialitzacions de les propietats per defecte ...*/ }
Com que aquest selector és menys específic que un selector d'atribut, només serà utilitzat pel cas per defecte. S'ha de tenir en compte que tots els altres valors d'atributs que no tenen el mateix estil que el de per defecte siguin explícitament coverts.
8.3. Selectors de classe
Per a fulls d'estil utilitzats amb l'HTML, els autors poden fer ús de la notació de punt (.) com a una alternativa a la notació de "~=" quan s'unifiqui en l'atribut "class". Així, per a HTML, "DIV.valor" i "DIV[class~=valor]" tenen el mateix significat. El valor de l'atribut ha de seguir immediatament el ".".

Per exemple, podem assignar informació d'estil a tots els elements amb class~="camp" tal com segueix:
	*.camp { color: green } /* tots els elements amb class~=camp */
o només:
	.camp { color: green } /* tots els elements amb class~=camp */

La següent assigna estil només als elements H1 amb class~="camp":
	H1.camp { color: green } /* elements H1 amb class~=camp */

Donades aquestes regles, la primera instància de H1 que segueix no tindria text verd, mentre que la segona sí:
	<H1>No verd</H1>

	<H1 class="camp">Molt verd</H1>

Per a unificar amb un subconjunt de valors "class", cada valor ha d'anar precedit per un ".", en qualsevol ordre.

Per exemple, la següent regla unifica amb qualsevol element P que tingui l'atribut "class" igual a una llista de valors separats per espais que inclogui "camp" i "mar":
	P.camp.mar { color: green }

Aquesta regla unifica quan class="camp blau aigua mar" però no unifica per a class="camp blau".

Nota. CSS dóna tant poder a l'atribut "class" que els autors podrien imaginablement dissenyar els seus propis "llenguatges de document" basats en elements amb quasi bé cap presentació associada (tals com DIV i SPAN en HTML) i assignant-los informació d'estil a través de l'atribut "class". Els autors haurien d'evitar aquesta pràctica ja que els elements estructurals d'un llenguatge de document sovint tenen significats reconeguts i acceptats i les classes definides pels autors, no.
9. Selectors ID
Els llenguatges de document poden contenir atributs que estan declarats per a ser de tipus ID. El que fa especial els atributs de tipus ID és que dos d'aquests atributs no poden tenir el mateix valor; sigui quin sigui el llenguatge del document, un atribut ID pot ser usat per a identificar el seu element de manera única. En HTML tots els atributs ID s'anomenen "id"; les aplicacions XML poden anomenar els atributs ID diferentment, però s'aplica la mateixa restricció.

L'atribut ID d'un llenguatge de document permet als autors assignar un identificador a una instància d'un element de l'arbre del document. Els selectors ID de CSS unifiquen amb una instància d'un element basant-se en el seu identificador. Un selector ID de CSS conté un "#" seguit immediatament pel valor de l'ID.

El següent selector ID unifica amb l'element H1 l'atribut ID del qual té el valor "capitol1":
	H1#capitol1 { text-align: center }
En el següent exemple, la regla d'estil unifica amb l'element que té com a valor de ID "z98y". La regla unificarà, així, amb l'element P:
	<HEAD>
	<TITLE>Unificar P</TITLE>
	   <STYLE type="text/css">
	      *#z98y { letter-spacing: 0.3em }
	   </STYLE>
	</HEAD>
	<BODY>
	   <P id=z98y>Tot el text</P>
	</BODY>
En el següent exemple, tanmateix, la regla d'estil només unificarà amb un element H1 que té l'ID amb valor el "z98y". La regla no unificarà amb l'element P en aquest exemple:
	<HEAD>
	<TITLE>Unificar només H1</TITLE>
	   <STYLE type="text/css">
	      H1#z98y { letter-spacing: 0.5em }
	   </STYLE>
	</HEAD>
	<BODY>
	   <P id=z98y>Tot el text</P>
	</BODY>
Els selectors ID tenen una precedència més alta que els selectors d'atribut. Per exemple, en HTML, el selector #p123 és més específic que [ID=p123] en termes de l'efecte cascada.

Nota. En XML 1.0 la informació sobre quin atribut conté l'ID d'un element es troba continguda en una DTD. Quan s'analitza gramaticalment l'XML els agents d'usuari no sempre llegeixen la DTD, i per això poden no saber quin és l'ID d'un element. Si un dissenyador de fulls d'estil sap o sospita que aquest serà el cas, hauria d'utilitzar, enlloc, selectors d'atribut normals: [name=p371] enlloc de #p371. No obstant, l'ordre de cascada dels selectors d'atribut normals és diferent del dels selectors ID. Pot ser necessari afegir una prioritat "!important" a les declaracions: [name=p371] {color: red !important}. Evidentment, els elements en documents XML 1.0 sense una DTD no tenen IDs en absolut.
10. Pseudo-elements i pseudo-classes
A CSS2, l'estil està normalment associat a un element basant-se en la seva posició en l'arbre del document. Aquest model tan simple és suficient per a molts casos, però alguns escenaris de publicació comuns poden no ser possibles degut a l'estructura de l'arbre del document. Per exemple, en HTML 4.0 no hi ha cap element que es refereixi a la primera línia d'un paràgraf, i per tant, no hi ha cap selector CSS simple que pugui per-hi referència.

CSS introdueix els conceptes de pseudo-elements i pseudo-classes per a permetre el formatat basat en informació que queda fora de l'arbre del document.


Ni els pseudo-elements ni les pseudo-classes apareixen en el document origen ni en l'arbre del document.

Les pseudo-classes estan permeses en qualsevol lloc dels selectors, mentre que els pseudo-elements només poden aparèixer després del subjecte del selector.

Els noms dels pseudo-elements i les pseudo-classes són case-insensitive.

Algunes pseudo-classes són mútuament excloents, mentre que altres poden ser aplicades simultàniament al mateix element. En cas de conflicte de regles, l'ordre normal de cascada determina el desenllaç.

Els agents d'usuari HTML conformats poden ignorar totes les regles amb :first-line o :first-letter en el selector, o, com a alternativa, poden només suportar un subconjunt de les propietats d'aquests pseudo-elements.
11. Pseudo-classes
11.1. La pseudo-classe :first-child
La pseudo-classe :first-child unifica amb un element que sigui el primer fill d'algun altre element.

En el següent exemple, el selector unifica amb cada element P que sigui el primer fill d'un element DIV. La regla suprimeix la indentació del primer paràgraf d'un DIV:
	DIV > P:first-child { text-indent: 0 }

Aquest selector unificaria amb el P de dins del DIV del següent fragment:
	<P> L'últim P abans de la nota.

	<DIV class="nota">
	   <P> El primer P dins la nota.
	</DIV>

però no unificaria amb el segon P del següent fragment:
	<P> L'últim P abans de la nota.
	<DIV class="nota">
	   <H2>Nota</H2>
	   <P> El primer P dins la nota.
	</DIV>

La següent regla inicialitza el pes de la font a 'bold' per a cada element EM que sigui descendent d'un element P que sigui un primer fill:
	P:first-child EM { font-weight : bold }

unificarà amb l'EM:
	<H6>
	   <P>En aquest text <U>això estarà subratllat</U>
	   <EM>però això estarà inclinat</EM>.
	</H6> 
ja que P és el primer fill de H6 i EM és un descendent de P. Cal remarcar que com que les caixes anònimes no són part de l'arbre del document, no es compten quan es calcula el primer fill.

Per exemple, també l'element EM d'aquí:
	<P>Text1 <EM>text2</EM>
és el primer fill del P.

Els dos següents selectors són equivalents:
   * > A:first-child /* A és el primer fill de qualsevol element */
   A:first-child     /* El mateix */
11.2. Les pseudo-classes de link: :link i :visited
Els agents d'usuari normalment mostren els links no visitats de manera diferent que els links que han estat prèviament visitats. CSS facilita les pseudo-classes ':link' i ':visited' per a distingir-los:


Nota. Després d'un cert temps, els agents d'usuari poden escollir retornar un link visitat a l'estat (no visitat) ':link'.

Els dos estats són mútuament excloents.

El llenguatge del document determina quins elements són ancles hiperlink origen. Per exemple, en HTML 4.0, les pseudo-classes de link s'apliquen als elements A amb un atribut "href". Així, les dues declaracions CSS2 següents tenen un efecte similar:
	A:link { color: red }

	:link { color: red }
Si el següent link:
	<A class="extern" href="http://out.side/">link extern</A>
ha estat visitat, aquesta regla:
	A.extern:visited { color: blue }
el posarà en blau.
11.3. Les pseudo-classes dinàmiques: :hover, :active i :focus
Els agents d'usuari interactius de vegades canvien la presentació en resposta a les accions dels usuaris. CSS facilita tres pseudo-classes per als casos més comuns:



Aquestes pseudo-classes no són mútuament excloents. Un element pot unificar amb vàries d'elles al mateix temps.

CSS no defineix quins elements poden trobar-se en els esmentats estats, o com s'entra i se surt d'aquests estats. Els scripts poden canviar tant si els elements reaccionen als events de l'usuari com si no, i diferents dispositius i agents d'usuari poden tenir diferents maneres d'apuntar o d'activar els elements.

Els agents d'usuari no estan obligats a renovar un document que s'està mostrant actualment degut a transicions de les pseudo-classes. Per exemple, un full d'estil pot especificar que la font-size d'un link :active hauria de ser més gran de la d'un link inactiu, però com que això podria causar que les lletres canvïin la seva posició quan el lector seleccioni el link, un agent d'usuari pot ignorar la corresponent regla d'estil.
	A:link { color: red } /* links no visitats */
	A:visited { color: blue } /* links visitats */
	A:hover { color: yellow } /* l'usuari passa per sobre del link */
	A:active { color: lime } /* links actius */
Cal notar que A:hover s'ha d'emplaçar després de les regles A:link i A:visited, ja que d'altra manera, les regles de l'efecte cascada amagarien la propietat color de la regla A:hover. Similarment, com que A:active es troba després de A:hover, el color actiu (lime) s'aplicarà quan l'usuari activi i quan passi per sobre de l'element A.

Un exemple de combinació de pseudo-classes dinàmiques:
	A:focus { background: yellow }

	A:focus:hover { background: white }
L'últim selector unifica amb els elements A que es troben en la pseudo-classe :focus i en la pseudo-classe :hover.

Per a més informació sobre la presentació dels contorns del focus, podeu consultar l'apartat sobre contorns dinàmics del tema "Interfície d'usuari".

Nota. En CSS1 la pseudo-classe ':active' era mútuament excloent amb ':link' i ':visited'. Ara això ja no es dóna. Un element pot ser ':visited' i ':active' alhora (o ':link' i ':active') i les regles de cascada normal determinen a quines propietats s'apliquen.
11.4. La pseudo-classe d'idioma: :lang
Si el llenguatge del document especifica com es determina l'idioma (language) d'un element és possible escriure selectors en CSS que unifiquin amb un element basant-se en el seu idioma. Per exemple, en HTML l'idioma es determina per una combinació de l'atribut "lang", l'element META i possiblement per informació del protocol (tal com capçaleres HTTP). XML utilitza un atribut anomenat xml:lang, i hi pot haver altres mètodes específics de llenguatge per a determinar l'idioma.

La pseudo-classe ':lang(C)' unifica si l'element és en l'idioma C. Aquí C és un codi d'idioma tal com està especificat en l'HTML 4.0 i en la RFC 1766. S'unifica de la mateixa manera que l'operador '|='.

Les següents regles fixen les marques de cita per a un document HTML que tant pot ser en francès com en alemany:
	HTML:lang(fr) { quotes: '« ' ' »' }

	HTML:lang(de) { quotes: '»' '«' '\2039' '\203A' }

	:lang(fr) > Q { quotes: '« ' ' »' }

	:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }
La segona parella de regles realment inicialitzen la propietat quotes en elements Q d'acord amb l'idioma del seu pare. Això es dóna perquè la tria de les marques de cita es basa típicament en l'idioma de l'element que envolta la cita, no la cita en sí mateixa: com aquest fragment de francès "à l'improviste" enmig d'un text en anglès utilitza les marques de cita angleses.
12. Pseudo-elements
12.1. El pseudo-element :first-line
El pseudo-element :first-line aplica estils especials a la primera línia formatada d'un paràgraf. Per exemple:
	P:first-line { text-transform: uppercase }

Aquesta regla significa "canvia les lletres de la primera línia de cada paràgraf a majúscules". No obstant, el selector "P:first-line" no unifica amb cap element real d'HTML. Unifica amb un pseudo-element que els agents d'usuari conformats inseriran al començament de cada paràgraf.

Cal notar que la longitut de la primera línia depèn d'un cert nombre de factors, incloent-hi l'amplada de la pàgina, la mida de la font, etc. Així, un paràgraf HTML com:
	<P>Això és un paràgraf HTML una mica

	llarg que serà trencat en vàries línies. La

	primera línia s'identificarà mitjançant una

	seqüència fictícia de tags. Les altres línies

	seran tractades com a línies ordinàries del

	paràgraf.</P>

les línies del qual han de ser trencades tal com segueix:
	AIXÒ ÉS UN PARÀGRAF HTML UNA MICA LLARG QUE

	serà trencat en vàries línies. La primera línia 
	
	s'identificarà mitjançant una seqüència fictícia de tags.

	Les altres línies seran tractades com a 

	línies ordinàries del paràgraf.

poden ser "reescrites" pels agents d'usuari per a incloure la seqüència fictícia de tags per a :first-line. Aquesta seqüència fictícia de tags ajuda a mostrar com s'hereten les propietats.
	<P><P:first-line> Aquest és un paràgraf HTML una

	mica llarg que </P:first-line> serà trencat en vàries

	línies. La primera línia s'identificarà mitjançant

	una seqüència fictícia de tags. Les altes línies
	
	seran tractades com a línies ordinàries del
	
	paràgraf.</P>

Si un pseudo-element fracciona un element real, l'efecte desitjat pot sovint ser descrit per una seqüència fictícia de tags que tanca i després re-obre l'element. Així, si nosaltres marquem el paràgraf previ amb un element SPAN:
	<P><SPAN class="test"> Aquest és un paràgraf HTML una

	mica llarg que serà trencat en vàries

	línies.</SPAN> La primera línia s'identificarà

	mitjançant una seqüència fictícia de tags. Les altres línies

	seran tractades com a línies ordinàries del

	paràgraf.</P>

l'agent d'usuari podria generar els tags apropiats d'inici i de final per a SPAN quan insereixi la seqüència fictícia de tags per a :first-line:
	<P><P:first-line><SPAN class="test"> Aquest és un

	paràgraf HTML una

	mica llarg que </SPAN></P:first-line><SPAN class="test"> serà

	trencat en vàries

	línies.</SPAN> La primera línia s'identificarà

	mitjançant una seqüència fictícia de tags. Les altres línies

	seran tractades com a línies ordinàries del

	paràgraf.</P>

El pseudo-element :first-line només pot estar associat a un element block-level.

El pseudo-element :first-line és similar a un element inline-level, però amb certes restriccions. Un pseudo-element :first-line només es pot aplicar a les següents propietats: propietats de font, propietats de color, propietats de fons, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-shadow i clear.
12.2. El pseudo-element :first-letter
El pseudo-element :first-letter pot ser utilitzat com a "inital caps" (majúscula inicial) i "drop caps" (majúscula abaixada), els quals són efectes tipogràfics comuns. Aquest tipus de lletra inicial és similar a un element inline-level si la seva propietat float és 'none', d'altra manera és similar a un element flotat (veieu "Floats").

Aquestes són les propietats a les quals es pot aplicar el pseudo-element :first-letter: propietats de font, propietats de color, propietats de fons, text-decoration, vertical-align (només si float és 'none'), text-transform, line-height, propietats de marge, propietats de farciment, propietats de vora, float, text-shadow i clear.

El següent full d'estil CSS2 farà que la lletra majúscula inicial s'abaixi abarcant dues línies:
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
	<HTML>
	<HEAD>
	<TITLE>Abaixar la lletra majúscula inicial</TITLE>
	<STYLE type="text/css">
	      P { font-size: 12pt; line-height: 12pt }
	      P:first-letter { font-size: 200%; font-style: italic;
	      font-weight: bold; float: left }
	      SPAN { text-transform: uppercase }
	</STYLE>
	</HEAD>
	<BODY>
	      <P><SPAN>The first</SPAN> few words of an article
	      in The Economist.</P>
	</BODY>
	</HTML>
Aquest exemple hauria de donar:



La seqüència fictícia de tags és:
	<P>
	<SPAN>
	     <P:first-letter>
	       T
	     </P:first-letter>he first
	</SPAN>
	     few words of an article in the Economist.
	</P>

Cal remarcar que els tags del pseudo-element :first-letter es troben contigus amb el contingut (és a dir, el caràcter inicial), mentre que el tag d'inici del pseudo-element :first-line és inserit just després del tag d'inici de l'element al qual està associat.

Per tal d'assolir el format tradicional d'abaixar les majúscules els agents d'usuari poden aproximar els tamanys de les fonts, per exemple, per a alinear les línies base. A més, també es pot tenir en compte el contorn del glyph quan es formati.

La puntuació (és a dir, els caràcters definits a Unicode en les classes de puntuació "open" (Ps), "close" (Pe), i "other" (Po)), que precedeix la primera lletra hauria d'estar-hi inclosa, com en:



El pseudo-element :first-letter unifica només amb parts d'elements block-level.

Alguns idiomes poden tenir regles específiques sobre com tractar certes combinacions de lletres. En holandès, per exemple, si la combinació de lletres "ij" apareix al començament d'una paraula, les dues lletres haurien de considerar-se dins del pseudo-element :first-letter.

El següent exemple il·lustra com pot interactuar el solapament de pseudo-elements. La primera lletra de cada element P serà verda amb una mida de font de '24pt'. La resta de la primera línia formatada serà blava, mentre que la resta del paràgraf serà vermell:
	P { color: red; font-size: 12pt }
	P:first-letter { color: green; font-size: 200% }
	P:first-line { color: blue }

	<P>Això és un text que ocupa dues línies.</P>

Tot assumint que apareixerà un trencament de línia abans de la paraula "text", la seqüència fictícia de tags per a aquest fragment podria ser:
	<P>
	<P:first-line>
	<P:first-letter>
	A 
	</P:first-letter>ixò és un 
	</P:first-line> 
	text que ocupa dues línies.
	</P>

Cal notar que l'element :first-letter es troba dins l'element :first-line. Les propietats inicialitzades en :first-line són heretades per :first-letter, però se sobreescriuen si la mateixa propietat està inicialitzada a :first-letter.
12.3. Els pseudo-elements :before i :after
Els pseudo-elements ':before' i ':after' poden ser utilitzats per a inserir contingut generat abans o després del contingut d'un element. Estan explicats en el tema sobre contingut generat.
	H1:before {content: counter(numcap, upper-roman) ". "}
Això genera un número en números romans en majúscula davant del contingut de cada element H1. Aquests números seran correlatius i realitzaran el paper de numeradors, per exemple, dels capítols d'un document.

Quan es combinen els pseudo-elements :first-letter i :first-line amb :before i :after, s'apliquen a la primera lletra o línia de l'element que inclou el text inserit:
	P.especial:before {content: "Especial! "}

	P.especial:first-letter {color: #ffd800}
Això presentarà la "E" de "Especial!" en daurat (color #ffd800).
Tancar
Pàgina Principal
Introducció al Manual d'HTML Dinàmic
Glossari
Referències























HTML 4.0
Introducció al manual d'HTML 4.0
Taules
Formularis
Objectes, imatges i applets
Scripts
Informació de l'idioma i sentit del text
Frames
Nous elements
Elements menyspreuats i obsolets
Fulls d'estil
Nous atributs de l'HTML 4.0
Índex d'atributs nous
Índex d'atributs menyspreuats
DTD
Annexe












Introducció als CSS
Introducció als CSS2 i al manual
Propietats CSS2
Fulls d'estil audibles
Model de caixa
Sintaxi i tipus bàsics de dades
Model de formatat visual
Detalls del model de formatat visual
Assignar valors de propietats, la cascada i l'herència
Interfície d'usuari
Efectes visuals
Text
Taules
Fonts
Contingut generat, numeració automàtica i llistes
Colors i fons
Selectors
Tipus de mitjans
Mitjans paginats
Suport de CSS2
Annexe




Introducció al DOM
DOM Nivell 1 - Nucli
DOM Nivell 1 - HTML
Articles sobre el DOM






















Programació en DHTML
Demos