Les Pseudo-éléments

Un pseudo-élément est une chose que l’on n’aurait pas pu cibler sans ajouter une balise (universelle ou non) au code source. Exemple: à la place de ::first-letter, on aurait dû ajouter un élément span entourant la première lettre de l’élément ciblé.
CSS3 propose une nouvelle syntaxe pour les pseudo-éléments : au lieu du « : » il faudra écrire « :: » (deux fois deux-points). Notez que tous les navigateurs supportent les deux orthographes pour les pseudo-éléments.

1. ::first-letter et ::first-line

Les pseudo-éléments ::first-letter et ::first-line correspondent respectivement au premier caractère (pratique pour créer une lettrine) et à la première ligne de texte au sein d’un élément de type bloc ou équivalent.

Syntaxe :
div p::first-letter{
color:blue;
}

A. Cibler la 1ère lettre des h3 des articles

B. Cibler la 1ère ligne des paragraphes des articles

Revue de presse

Courrier international n°802 - 14 avril 2008

Première retranscription

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed fermentum dapibus leo. Quisque consectetuer diam vitae turpis. Cras aliquam varius erat. Vestibulum lorem odio, commodo condimentum, commodo eu, condimentum consequat, nulla. Vestibulum sed augue. In hac habitasse platea dictumst. Ut auctor nulla et est. Nulla facilisi. Sed interdum lacinia justo. Donec facilisis.

Mauris vel nunc eu augue tempus eleifend. Duis convallis sem vitae turpis. In scelerisque sapien quis metus. Nam purus pede, placerat eu, dictum quis, euismod sed, pede. Integer faucibus lectus consequat nibh. Morbi est leo, semper eget, consequat sit amet, ultrices in, magna. Fusce tincidunt risus eget enim. Cras at ipsum hendrerit elit accumsan ultricies. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

(D'après M. Gaudoux - Paris 2002)

Deuxième retranscription

Troisième retranscription

(D'après M. Gaudoux - Paris 2002)

Quatrième retranscription

(D'après M. Gaudoux - Paris 2002)

3. Générer du contenu avec ::before et ::after

A. Ajoutez automatiquement une image au début et un "!" à la fin des h3 de l'article

B. Ajoutez automatiquement "«" au début et "»" à la fin du 1er paragraphe de ce document

Revue de presse

Courrier international n°802 - 14 avril 2008

Première retranscription

(D'après M. Gaudoux - Paris 2002)

Deuxième retranscription

Troisième retranscription

(D'après M. Gaudoux - Paris 2002)

Quatrième retranscription

(D'après M. Gaudoux - Paris 2002)

C. Ajoutez automatiquement un caractère spécial au choix à la suite des tâches terminées

Tâche 01

Tâche 02

Tâche 03

Tâche 04

Tâche 05

Les Pseudo-éléments

1. ::first-letter et ::first-line

A. Cibler la 1ère lettre des h3 des articles

B. Cibler la 1ère ligne des paragraphes des articles

Revue de presse

Courrier international n°802 - 14 avril 2008

Première retranscription

(D'après M. Gaudoux - Paris 2002)

Deuxième retranscription

Troisième retranscription

(D'après M. Gaudoux - Paris 2002)

Quatrième retranscription

(D'après M. Gaudoux - Paris 2002)

2. ::selection

A. Cibler la sélection des paragraphes des articles

3. Générer du contenu avec ::before et ::after

A. Ajoutez automatiquement une image au début et un "!" à la fin des h3 de l'article

B. Ajoutez automatiquement "«" au début et "»" à la fin du 1er paragraphe de ce document

Revue de presse

Courrier international n°802 - 14 avril 2008

Première retranscription

(D'après M. Gaudoux - Paris 2002)

Deuxième retranscription

Troisième retranscription

(D'après M. Gaudoux - Paris 2002)

Quatrième retranscription

(D'après M. Gaudoux - Paris 2002)

C. Ajoutez automatiquement un caractère spécial au choix à la suite des tâches terminées