L1 Info : Informatique et Document, CSS
 
◃  Ch. 5 Les sélecteurs  ▹
 

Pseudo-éléments / Pseudo-classes

  • Pseudo-classes : sélecteurs css disposant du même niveau de priorité qu'un sélecteur de classe
    • a:link et a:visited : pseudo-classes permettant de distinguer les liens hypertextes vierges de ceux déjà visités.
    • Suffixes à ajouter à un sélecteur valide :
    • :active, :hover et :focus : Pseudo-classes dynamiques caractérisant les éléments interactifs d'une page web
      • lien sur lequel l'utilisateur est en train de cliquer
      • passage du curseur de souris sur l'élément
      • éléments de formulaire acceptant des saisies clavier
    • :lang : destiné à la distinction des langues utilisées.
      Exemple : html:lang(fr){...}
  • Pseudo-élément : sélecteur css disposant du même niveau de priorité qu'un sélecteur de type
    • :first-line : Caractérisation de la première ligne de texte d'un bloc
    • :first-letter : idem pour le premier caractère d'un élément.
    • :before et :after : autorise l'ajout de automatique de texte ou de numéros avant ou après le contenu d'un élément.
    • Exemple : Le paragraphe suivant est associé à ces sélecteurs CSS :
      p {
        margin-right : 50%;
        }
      p:first-line {
        font-weight :bold;
        }
      p:first-letter {
        color : red;
        font-size : 3em;
        }

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing dictum nisl, vel adipiscing ipsum dictum at. Etiam vulputate urna commodo magna tempus consectetur. Sed dignissim nulla ac metus tempus ultrices vel eu purus. Proin ut massa ac orci commodo tristique in vitae massa. Proin consequat feugiat luctus. Fusce nec eros arcu. Vivamus euismod, lectus nec lobortis commodo, massa metus fringilla ante, vel vehicula sem tortor in magna. Mauris sed risus ut lectus pharetra tincidunt quis sit amet leo.