Pseudo-élément

 

"pseudo-élément" c'est un élément qui n'est pas défini par une balise mais par sa position

Entrons dans le vif du Sujet

      CSS1 iemzchromeoperasafari
I Pseudo-éléments

CSS1 décrit plusieurs pseudo-éléments :

Exemple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu vitae nulla imperdiet bibendum nec id enim. Pellentesque ornare imperdiet quam et luctus. Fusce a mi quis justo dignissim consectetur a at lectus. Sed eget urna nec magna iaculis posuere eget nec velit. Nulla facilisi. Aenean eu dui ac nunc posuere rhoncus. In non pellentesque risus.

Exemple
  • Lorem ipsum dolor sit amet,
  • consectetur adipiscing elit.
  • Duis vel arcu vitae nulla imperdiet
  • bibendum nec id enim.
Exemple
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu vitae nulla imperdiet bibendum nec id enim.

II Nouvelle syntaxe

Afin de différencier les pseudo-éléments des pseudo-classes, les pseudo-éléments s"écrivent maintenant avec un double deux-points (aux premiers temps de leur implémentation, un seul signe : était nécessaire) :

Référence
  1. ::before
  2. ::after
  3. ::first-line
  4. ::first-letter

III Les dernières implémentations ::selection

Le pseudo-élément ::selection permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).

Seul un sous-ensemble des propriétés CSS peut être utilisée pour une règle dont le sélecteur contient ::selection :

On notera que background-image est ignoré, comme les autres propriétés.

Exemple
Hello Selectionnez-moi ..... que d'or

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel arcu vitae nulla imperdiet bibendum nec id enim.
Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Test 1 : Soit la liste avec sous-listes imbriquées

  1. Comptines
    • un,
    • deux ,
    • trois
  2. nous irons au bois
    • quatre,
    • cinq ,
    • six
  3. cueillir des cerises
    • sept,
    • huit,
    • neuf

Comment désigner à l'aide de pseudo-élément l'item "trois" ?

Test2

Le formulaire suivant possède des champs obligatoires (classe .obligatoire) et des champs facultatifs (classe .facultatif). Au moyen uniquement du css, ajouter derrière chacun des champs obligatoires le contenu "requis" et derrière les champs facultatif le contenu "optionnel"



<form name="form1" method="post" action="">
<label for="1">Nom</label>
<input type="text" name="1" id="1" class="obligatoire">
<br>
<label for="2">Prénom</label>
<input type="text" name="2" id="2" class="facultatif">
<br>
<label for="3">date_naissance</label>
<input type="text" name="3" id="3" class="facultatif">
</form>