Easy-Micro

LANGAGE Langage CSS
Pseudo classes
Les pseudo classes CSS

Les pseudo classes permettent de modifier un style en fonction d'un événement ou de la position relative d'une balise au sein d'autres balises. Le nom des pseudo classes est prédéfini, non modifiable.

CSS Sélecteur d'ID

  • Un sélecteur d'id (id = identifiant) sert à appliquer un style à une balise HTML qui est déjà identifiée par son id pour, par exemple, un script JavaScript.

    Le selecteur doit être unique dans la page HTML. Il ne peut donc être utilisé que sur une seule balise.

    Devant son nom doit être placé le signe #. Exemple :

    <html>
    <head>
    <style type="text/css">
    #grasitalique {
    font-weight:bold;
    font-style:italic;
    }
    </style>
    </head>
    <body>
    <p id="grasitalique ">Easy-Micro et le CSS</p>
    </body>
    </html>

CSS Pseudo-classes de lien

  • Les pseudo-classes de lien (link, visited...) perment de modifier uniquement le style de la balise a (a = ancre soit lien hypertextes).
    • link
      Pour définir un style sur un lien hypertextes pas encore visité. Exemple :
      a:link {color: red; text-decoration:underline;}
    • visited
      Pour définir un style sur un lien hypertextes déjà visité. Exemple :
      a:visited {color: blue; text-decoration:underline; }
Exemple d'utilisation de pseudo classes CSS
a:link {
color:#ff0000;
text-decoration:underline;
}

a:visited {
color:#ff0000;
text-decoration:underline;
}

CSS Pseudo-classes dynamiques

  • Les pseudo-classes dynamiques (comme hover, active, focus...) permetent de modifier un style en fonction d'un événement.
    • hover
      La pseudo classe CSS hover permet d'affecter un style lors d'un survol par la souris
      Exemple: a:hover {color: red; text-decoration:none;}

      Exemple de style CSs qui remplit un DIV au survol de la souris :
      div.monstyle:hover {
      background-color: #880000;
      }
    • active
      Cette pseudo classe CSS permet d'affecter un style lors d'un clic de souris
      Exemple: a:active {color: blue; text-decoration:none; }
    • focus
      La pseudo classe focus permet d'affecter un style lorsque qu'une balise a le focus
      Exemple: textarea:focus {background-color:#ff0000; }
    Exemple d'utilisation de pseudo classes CSS dynamiques
    a:link {
    color:#ff0000;
    text-decoration:underline;
    }

    a:visited {
    color:#ff0000;
    text-decoration:underline;
    }

    a:hover {
    color:#ff00ff;
    text-decoration:none
    }

CSS Autres pseudo-classes CSS

  • first-child
    La pseudo classe first-child permet d'appliquer un style à la première balise au sein d'un élément.
    Exemple : div > ul:first-child { visibility:hidden; }
    Soit, la première balise ul au sein de la balise div sera invisible.
  • first-line
    La pseudo classe CSS first-line permet d'appliquer un style à la première ligne d'un paragraphe.
    Exemple : p:first-line { text-transform:uppercase; }
  • first-letter
    first-letter permet d'appliquer un style à la première lettre d'un paragraphe.
    Exemple : p:first-letter { font-weight:bold; font-size:150%; }
  • lang
    Cette pseudo classe CSS permet d'appliquer un style en fonction de la langue du document.
    Exemple : HTML:lang(fr) { quotes:'«''»'; }. Soit utilisation des guillemets français.
  • @page
    La pseudo-classe CSS @page permet de modifier la mise en page d'un document HTML à l'impression.
    Exemple : @page:first { size:portrait; margin-top: 4cm; margin-bottom: 2cm; }
< Page précédente LANGAGE CSS Page suivante >