El pseudo-element :first-letter

Publicat el 31/03/2006

A l'especificació de CSS 2.1 el pseudo-element :first-letter queda definit com:

The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

És a dir, es podrà aplicar un estil particular al primer caràcter de qualsevol element amb comportament de bloc.

Donat un HTML tal com:


<p>Lorem ipsum dolor sit amet</p>

I aplicant un CSS tal com:


p:first-letter {
   color: red;
   }

El codi hipotètic generat seria:


<p>
   <p:first-letter>L</p:first-letter>
   orem ipsum dolor sit amet</p>

En canvi un element inline com pugui ser un span no ho permetria.

Però no sempre és cert que el primer caràcter és l'afectat. A l'especificació contempla el cas dels caràcters de puntuació d'obertura (Ps), de tancament (Pe), inicials (Pi), finals (Pf) i d'altres (Po) definits a UNICODE com a caràcters especials que es veuen afectats pel pseudo-element :first-letter però que no actuen com a primer caràcter i per tant el caràcter següent també se'n veurà afectat.

Per exemple; donat un HTML tal com.


<p>"Lorem ipsum dolor sit amet"</p>

I aplicant un CSS tal com:


p:first-letter {
   color: red;
   }

Donaria com a resultat que els caràcters "L serien vermells, amb un codi hipotètic generat tipus:


<p>
   <p:first-letter>"L</p:first-letter>
   orem ipsum dolor sit amet"</p>

D'aquesta manera l'especificació permet donar estil a la primera lletra tot i ser una sentència entre cometes o entre altres signes de puntuació.

Però què passa quan es vol donar estil al primer caràcter del bloc independentment de quin tipus sigui?

Per exemple, es podria donar el cas d'un label associat a un input obligatori:


<label for="nom" class="obligatori">*Nom:</p>

I volgués marcar amb un color i diferent l'asterisc per resaltar-lo un pèl més.


label:first-letter {
   display: block;
   color: red;
   }

Obtindriem en vermell tant l'asterisc (*) com la "N" cosa que no voliem.

Una solució és afegir un espai entre l'asterisc i la "N". No és fantàstica però l'especificació sembla que no contempla aquesta possibilitat.

Comentaris

Afegir un comentari