Dans ce dernier tutoriel sur les sélecteurs, je vais vous présenter une forme très spéciale de sélecteurs. Il s'agit de ce qu'on appelle les pseudo-classes et pseudo-éléments. Ce sont des sélecteurs qui ne concernent pas des éléments HTML spécifiques, mais qui sont générés par l'appareil de sortie.
Avec les pseudo-classes et pseudo-éléments, il est possible de définir des déclarations pour des parties d'un document HTML qui ne peuvent pas être décrites de manière explicite par un élément HTML. Des exemples typiques incluent un lien hypertexte récemment cliqué ou un lien hypertexte non visité.
Styliser les hyperliens
Très souvent, on souhaite styliser les liens hypertexte d'une page. Pour cela, le CSS propose de nombreuses possibilités pour cibler les différents états des liens hypertexte et les adapter visuellement.
Si vous souhaitez par exemple attribuer une couleur rouge à un lien hypertexte, voici comment cela se présenterait :
a:link {
color: red;
}
Avec a:visited, les liens hypertexte déjà visités sont marqués. En utilisant la syntaxe suivante, ces liens hypertexte peuvent être représentés en bleu s'ils ont déjà été visités.
a:visited {
color:blue;
text-decoration:none;
}Voici comment cela apparaît dans le navigateur :
Si vous souhaitez styliser spécifiquement les liens hypertexte qui sont actuellement cliqués, c'est également possible.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
La syntaxe utilisée est a:active.
En revanche, la syntaxe a:hover fait référence à l'état où le curseur de la souris survole le lien hypertexte. De plus, avec a:focus, un autre pseudo-élément est disponible. Celui-ci décrit le moment où le lien hypertexte obtient le focus.
Autres pseudo-éléments
Il existe des pseudo-éléments permettant de cibler des parties d'autres éléments. Un exemple typique est ::first-letter. Ce pseudo-élément sélectionne le premier caractère de l'élément actuel. Il peut être utilisé pour tous les éléments contenant du texte. Mais attention : les pseudo-éléments ne doivent être indiqués qu'à la fin de tous les sélecteurs. Ils doivent donc être placés avant la accolade ouvrante.
h1::first-letter {
color: blue;
}
Avec ::first-line, la première ligne d'un élément peut être ciblée. Ce pseudo-élément s'applique exclusivement aux éléments de niveau bloc. Voici un exemple :
p::first-line {
background-blue;
}
Et voici le résultat dans le navigateur :
un
En utilisant les pseudo-éléments :after et :before, il est possible d'ajouter du contenu supplémentaire avant et après un élément. La propriété content détermine ce qui doit être affiché.
• normal - le pseudo-élément généralement défini n'est pas généré.
• none - le pseudo-élément n'est pas généré.
• <string> - la chaîne de caractères spécifiée ici est affichée. Les chaînes de caractères doivent être délimitées par des guillemets simples ou doubles.
• <uri> - la ressource spécifiée par l'URI est insérée.
• <counter> - définit un compteur ou cible un compteur spécifique.
• attr(<identifier>) - la valeur de l'attribut spécifié entre parenthèses est insérée.
• close-quote - insère un guillemet fermant.
• no-close-quote - aucun guillemet fermant n'est inséré, mais la profondeur d'imbrication augmente de un.
• no-open-quote - aucun guillemet ouvrant n'est inséré, mais la profondeur d'imbrication augmente de un.
• open-quote - insère un guillemet ouvrant.
Un exemple :
ul li:before {
content: uri("bullet.gif");
}
Avec CSS3, le pseudo-sélecteur :not a été introduit. Il permet de sélectionner très simplement des éléments spécifiques. Un premier exemple illustre la puissance de ce pseudo-sélecteur. Supposons que vous souhaitiez sélectionner tous les liens hypertexte qui n'ont pas d'attribut href. La syntaxe correspondante serait la suivante :
a:not([href])
Les liens hypertexte "normaux" ne seraient pas affectés par cette syntaxe. Cependant, cela permettrait d'accéder aux définitions d'ancre.
<a name="top">Seitenanfang</a>
Un exemple un peu plus détaillé met en évidence la puissance de :not. À l'intérieur d'un document, divers paragraphes de texte ont été définis.
<body> <h1>PSD-Tutorials.de</h1> <p>Das ist ein Absatz.</p> <p>Das ist ein weiterer Absatz.</p> <div>Das ist ein Textbereich.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
À côté des paragraphes marqués par des balises p, il y a aussi une section div et un hyperlien. Maintenant, les actions suivantes doivent être effectuées :
• Tous les paragraphes marqués par des balises p doivent avoir une couleur de texte noire.
• Partout où il n'y a pas de paragraphes p, la couleur du texte doit être rouge.
La syntaxe CSS correspondante est la suivante :
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Le principe de l'héritage
Une des choses les plus importantes lorsqu'il s'agit de comprendre les définitions CSS est l'héritage. En effet, en CSS, les propriétés de style sont héritées d'un élément à un autre.
Un exemple :
html {
color: red
}Grâce à cette définition, la couleur de premier plan rouge est attribuée à l'élément html.
En raison du principe d'héritage, cette définition de couleur s'applique désormais tout d'abord à tous les éléments qui sont subordonnés à html. Ainsi, au départ, tous les éléments situés sous html sont affichés en rouge. L'avantage de cette approche : pour ces éléments, vous n'avez pas à définir explicitement le rouge comme couleur. Mais que se passe-t-il si le contenu des paragraphes p ne doit pas être affiché en rouge ? Alors, il faut écraser la définition de couleur supérieure de html.
html {
color: red;
}
p {
color: #000;
}
Que se passe-t-il s'il y a maintenant deux éléments p et div ?
<body> <p>PSD-Tutorials.de</p> <div>Welt</div> </body>
Le résultat est le suivant :
La définition de couleur de html affecte uniquement le contenu du div. En revanche, le paragraphe p est affiché en noir.
En CSS, il existe différentes façons de définir des styles. C'est pourquoi il peut y avoir des instructions contradictoires pour un élément. Pour de tels cas, le CSS prévoit un principe de pondération. Ce principe définit clairement quelles instructions ont la priorité pour un élément. Je ne veux pas entrer dans les détails de ce principe à ce stade. Cependant, vous pouvez trouver des informations détaillées à ce sujet par exemple sur le site http://wiki.selfhtml.org/wiki/CSS/Kaskade ou encore sur http://www.thestyleworks.de/basics/cascade.shtml.
Mon objectif est de vous montrer ce à quoi vous devez faire attention lorsque vous définissez des propriétés CSS. Pour cela, prenons l'exemple suivant :
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Dans le navigateur, ça se présente comme ceci :
Comme vous pouvez le voir, les mots marqués avec strong sont formatés différemment. Le type de formatage appliqué dépend en fin de compte de l'ordre des définitions.
En outre, il existe également le mot-clé !important qui vous permet de marquer une instruction CSS comme étant particulièrement importante.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Ici encore, un regard sur les résultats :
N'oubliez pas de consulter les sources mentionnées dans ce tutoriel. (Même si, pour commencer, vous n'avez peut-être pas besoin de plonger trop profondément dans ce sujet).
