Css Pseudo Élément

Résumé

Les pseudo-éléments sont utilisés en CSS pour ajouter différents effets à quelques sélecteurs, ou à une partie de quelques sélecteurs.

Table des matières Syntaxe    Les pseudos-éléments :active , :link et :visited    Le pseudo-élément :first-line    Le pseudo élément :first-letter    Les pseudo-éléments et les classes CSS    CSS2 - Le pseudo-élément :before    CSS2 - Le pseudo-élément :after    Récapitulatif des pseudo-éléments

Syntaxe    

La syntaxe des pseudo-éléments :

sélecteur:pseudo-element {propriété: valeur;}

sélecteur.class:pseudo-élément {propriété: valeur;}

Les pseudos-éléments :active , :link et :visited    

Le pseudo-élément ":active" est utilisé pour définir l'apparence des liens non encore visités (:link) des liens déjà visités (:visited) et des liens sur lesquels le visiteur vien de cliquer (:active). La propriété :active définit l'apparence du lien au moment où l'utilisateur le sélectionne.

a:link {color: #FF0000; font-weight: bold;}
a:visited {color: #00FF00;}
a:active {color: #0000FF; font-style: italic; }


<p>Un texte <a title="lien vers un site exemple" href="http://www.exemple.com">avec un lien</a></p>

Ce pseudo-élément est compatible avec IE4, NN 6.2. Mais :active n'est pas compatible avec NN4.

Le pseudo-élément :first-line    

Le pseudo-élément :first-line est utilisé pour ajouter des styles spéciaux à la première ligne du texte dans un sélecteur :

p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps;}

<p>Un texte qui se finit sur deux ou plus de lignes</p>

Le rendu pourrait donner quelque chose comme ça (à écrire)

Dans l'exemple ci-dessus le navigateur affiche la première ligne formatée selon le pseudo-élément :first-line. Où le navigateur casse la ligne dépend de la taille de la fenêtre du navigateur.

Note : Le pseudo-élément first-line peut être seulement utilisé avec des éléments de niveau-bloc.

Note : Les propriétés suivantes s'appliquent au pseudo-élément :first-line :

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

Note : NN 4.5 ne supportent pas le pseudo-élément :first-line.

Le pseudo élément :first-letter    

Le pseudo-élément :first-letter est utilisé pour ajouter un style spécial à la première lettre d'un texte dans un sélecteur. Il est couramment utilisé pour définir l'apparence de la première lettre d'un paragraphe, plus connue sous le nom de lettrine dans le monde de l'imprimerie.

p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}

<p>Les premiers mots d'un article.</p>

Le rendu pourrait donner quelque chose comme ceci (mettre un lien)

Note : Le pseudo-élément :first-letter peut être seulement utilisé avec des éléments de niveau-bloc.

Note: Les propriétés suivantes s'appliquent au pseudo-élément :first-letter

    * font
    * color 
    * background
    * margin
    * padding
    * border
    * text-decoration
    * vertical-align (seulement si 'float' est à 'none')
    * text-transform
    * line-height
    * float
    * clear

Les pseudo-éléments et les classes CSS    

Les pseudo-éléments peuvent être combinés avec les classes CSS :

p.article:first-letter {color: #FF0000}

<p class="article">Un paragraphe est un article</p>

L'exemple ci-dessus fera que la première lettre de tous les paragraphes avec la class="article" sera rouge. Multiple Pseudo-elements

Plusieurs pseudo-éléments peuvent se combiner :

p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}

<p>Les premiers mots d'un article</p>

Dans l'exemple ci-dessus, la première lettre du paragraphe sera rouge avec une taille de police de 24pt. Le reste de la première ligne devrait être bleu tandis que le reste du paragraphe devrait être la couleur par défaut.

CSS2 - Le pseudo-élément :before    

Le pseudo-élément ":before" peut être utilisé pour insérer du contenu avant un élement.

Le style ci-dessous jouera un son avant chaque occurence d'un titre d'élément.

h1:before
{
content: url(beep.wav)
}

CSS2 - Le pseudo-élément :after    

Le pseudo-élément ":after" peut être utilisé pour insérer du contenu après un élement.

Le style ci-dessous jouera un son après chaque occurence d'un titre d'élément.

h1:after
{
content: url(beep.wav)
}

Récapitulatif des pseudo-éléments    

NN: Netscape, IE: Internet Explorer, W3C: Web Standard

Pseudo-elements,NN,IE,W3C,Intention :first-letter, ,5.5,CSS1,Ajoute un style spécial à la première lettre d'un texte :first-line, ,5.5,CSS1,Ajoute un style spécial à la première ligne d'un texte :before, , ,CSS2,Insère du contenu avant un élément :after, , ,CSS2,Insère du contenu après un élément :link :visited et :active,6.2,IE4,CSS1, Pour définir l'apparence des liens (non encore visités - déjà visités et venant d'être cliqués...)