CSS Les pseudo-classes
CSS pseudo-classes sont utilisées pour ajouter des effets spéciaux à certains sélecteurs.
Syntaxe
La syntaxe de pseudo-classes:
selector:pseudo-class {property:value;}
Classes CSS peut également être utilisé avec les pseudo-classes:
selector.class:pseudo-class {property:value;}
Anchor Les pseudo-classes
Les liens peuvent être affichées de différentes manières dans un navigateur CSS-portante:
Exemple
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Essayez vous-même »
Note: a: hover doit venir après a: link et a: visited dans la définition CSS pour être efficace!
Note: a: active doit venir après a: hover dans la définition CSS pour être efficace!
Remarque: La pseudo-classe des noms ne sont pas sensibles à la casse.
Les pseudo-classes et des classes CSS
Les pseudo-classes peuvent être combinées avec des classes CSS:
a.red:visited {color:#FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
<a class="red" href="css_syntax.asp">CSS Syntax</a>
Si le lien dans l'exemple ci-dessus a été visité, il sera affiché en rouge.
CSS - Le: first-child La pseudo-classe
Le: first-child pseudo-classe correspond à un élément déterminé qui est le premier enfant d'un autre élément.
Remarque: Pour: premier enfant à travailler dans IE8 et plus tôt, un <DOCTYPE!> doit être déclarée.
Cherchez l'élément <p> Tout d'abord
Dans l'exemple suivant, le sélecteur correspond à n'importe quel élément <p> qui est le premier enfant d'un élément:
Exemple
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Essayez vous-même »
Cherchez l'élément <i> première tous les éléments <p>
Dans l'exemple suivant, le sélecteur correspond à l'élément <i> première tous les éléments <p>:
Exemple
<html>
<head>
<style type="text/css">
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
<head>
<style type="text/css">
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Essayez vous-même »
Cherchez tous les éléments <i> dans tous les premiers éléments <p> enfants
Dans l'exemple suivant, le sélecteur correspond avec tous les éléments en éléments <i> <p> qui sont le premier enfant d'un autre élément:
Exemple
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
<head>
<style type="text/css">
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
Essayez vous-même »
CSS - Le: lang La pseudo-classe
Le: lang pseudo-classe vous permet de définir des règles spéciales pour les différentes langues.
Remarque: IE8 supporte le: lang pseudo-classe que si un <DOCTYPE!> est spécifié.
Dans l'exemple ci-dessous, l': lang classe définit les guillemets pour q éléments avec lang = "no":
Exemple
<html>
<head>
<style type="text/css">
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
<head>
<style type="text/css">
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Essayez vous-même »
Exemples
Ajouter des styles différents à des hyperliens
Cet exemple montre comment ajouter d'autres styles à des hyperliens.
Cet exemple montre comment ajouter d'autres styles à des hyperliens.
Utilisation: mettre l'accent
Cet exemple montre comment utiliser l': mise au point pseudo-classe.
Cet exemple montre comment utiliser l': mise au point pseudo-classe.
Toutes les classes CSS pseudo / Eléments
| Sélecteur | Exemple | Exemple de description |
|---|---|---|
| : Lien | a:link | Sélectionne tous les liens non visités |
| : Visited | a:visited | Sélectionne tous les liens visités |
| : Actif | a:active | Sélectionne le lien actif |
| : Hover | a:hover | Sélectionne liens sur la souris sur |
| : Mettre l'accent | input:focus | Sélectionne l'élément d'entrée qui a le focus |
| : La première lettre | p:first-letter | Sélectionne la première lettre de chaque élément <p> |
| : La première ligne | p:first-line | Sélectionne la première ligne de chaque élément <p> |
| : La première enfant | p:first-child | Sélectionne tous les éléments <p> qui est le premier enfant de son parent |
| : Avant | p:before | Insérer le contenu avant de chaque élément <p> |
| : Après | p:after | Insérer le contenu après chaque élément <p> |
| : Lang ( langue ) | p:lang(it) | Sélectionne tous les éléments <p> avec une valeur d'attribut lang en commençant par "il" |
0 commentaires:
Post a Comment
HELLO VISITORS THANKS FOR YOUR VISIT AND COMMENT