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; }

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; }


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Jeudi 20 juin 2019 - Semaine 25 - Saint Silvère (Demain: Saint Rodolphe)
Aujourd'hui, c'est l'anniversaire de Nicole Kidman (1967-52 ans), actrice australienne et américaine.
Haut de page Easy-Micro