CityDesk et Standards du Web - le wiki

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;}
Les classes CSS peuvent être aussi utilisées avec des pseudo-éléments :
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 : IE 4.01 et IE 5.0 ne supportent pas le pseudo-élément :first-line mais IE 5.5 le supporte.

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

Note : IE 4.01 et IE 5.0 ne supportent pas le pseudo-élément :first-letter mais IE 5.5 le supporte. Note : NN 4.5 ne supportent pas le pseudo-élément :first-letter.

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>
Le rendu devrait donner quelque choise comme ceci (mettre une photo de rendu)

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...)


DossierGlossaireCss

 
© GPL 24 Novembre, 2004