CSS Débutant .com

Pseudo Elements

Les pseudos-éléments font rélérence à des parties de texte qui ne sont pas forcément délimités par des balises HTML.

• La syntaxe
• Elements:
• first-line
• First Letter

La syntaxe

La syntaxe des pseudo éléments est un peu différente du CSS simple, mais sans grand changement.
selector:pseudo-element

Les pseudos-éléments font rélérence à des parties de texte qui ne sont pas forcément délimités par des balises HTML.

Par exemple le pseudo-élément :First-Letter désigne la première lettre d'un paragraphe. Le nom des pseudo-éléments est précédé de deux-points ( : ).

• first-line
• first-letter

First Line

Désigne la première lettre de tous les blocs de texte (titres H1 et autres, paragraphes...)

Au lieu de :
p{ font-size: small; }

On va mettre :
p: first-line { font-size: medium; color: #ff0000; }

Valeurs possibles :

• background
• clear
• color
• font
• letter-spacing
• line-height
• text-decoration
• text-transform
• vertical-align
• word-spacing

Comme vous pouvez le voir dans l'exemple en cliquant sur "Voir un exemple", les paragraphes sont exposées à une petite taille de police, mais le p: première ligne est définie comme une taille moyenne et une couleur rouge.


Voir un exemple

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce fermentum neque eget nisl. Quisque tincidunt. Proin dictum laoreet dui. Nulla justo. Quisque tortor sapien, gravida nec, sollicitudin non, placerat eu, lectus. Morbi placerat. Quisque ipsum turpis, placerat eu, pretium vitae, mattis vitae, nunc. Maecenas at turpis a magna hendrerit luctus.

Voir le code CSS

p.special:first-line {font-size: medium; color: #ff0000;}

Voir le code dans l'élément

<p class="special">the content</p>

First Letter

La pseudo-classe :first-letter sert à définir des lettrines ou caractères en capitale ouvrant un paragraphe.

Les propriétés suivantes peuvent être affectés à la première lettre pseudo- élément:

• background
• border
• clear
• color
• float
• font
• line-height
• margin
• padding
• text-decoration
• text-transform
• word-spacing

On obtient ainsi des effets qui sont agréables mais dont il ne faut pas abuser du point de vue design de votre page.

Attention

Notez un " tous les navigateurs ne supportent pas encore ce style. On l'appelle aussi "pseudo-style" ou "pseudo-élément".

Voir un exemple

This is a special sentence I wrote to demonstrate the use and look of the first-letter pseudo element. As you can see the first letter of this paragraph is styled differently than the rest of the characters within it. All of this was done by simply adding class="special_letter" to the opening <p> tag for this paragraph.

Voir le code CSS

p.special_letter:first-letter {font-size: x-large; font-weight: bold; color: #ff0000;}

Voir le code dans l'élément

<p class="special_letter">the content</p>