SÉLECTEUR CSS
Dans le chapitre Liens et images , nous avons appris comment connecter un document HTML à d’autres fichiers de notre projet. Les « sélecteurs CSS » sont similaires, mais au lieu de naviguer entre des fichiers entiers, ils permettent de mapper une seule règle CSS à un élément HTML spécifique. Cela permet de personnaliser sélectivement des éléments individuels tout en ignorant les autres.
À moins que vous ne souhaitiez que chaque section de votre site Web se ressemble exactement, il s’agit d’un élément crucial pour notre travail. C’est comme ça que nous disons des choses comme «Je veux que ce paragraphe soit bleu et que cet autre paragraphe soit jaune». Jusqu’à maintenant, nous n’avons réussi qu’à transformer tous nos paragraphes en bleu (ou en jaune).
Le seul sélecteur CSS que nous avons vu jusqu’à présent s’appelle le « sélecteur de type », qui cible tous les éléments correspondants d’une page. Dans ce chapitre, nous explorerons des méthodes plus granulaires pour mettre en forme une page Web avec des sélecteurs de classes, des sélecteurs de descendants, des pseudo-classes et des sélecteurs d’ID.
Mise en place
Nous n’aurons besoin que d’un fichier HTML et d’une feuille de style CSS pour notre exemple. Créez un nouveau dossier appelé css-selectors et une nouvelle page Web appelée selectors.html avec le balisage suivant:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Selecteurs CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<h1>Selecteurs CSS</h1>
<p>Les selecteur CSS vous permettent <em>de selectionner</em> des éléments HTM individuel. C'est <strong>très</strong> pratique.</p>
<p>Les classes sont très important car elle permettent de selectionner des boites de manière arbitraire au sein de la page.</p>
<p>On va également styliser des liens donc en voici un
<a href='https://e-artsup.fr'>E-Artsup</a>.
style.</p>
<div>BOUTON</div>
</body>
</html>Créez également styles.css, notre feuille de style dans le même dossier. Avec cela nous avons tout les éléments dont nous avons besoin pour explorer les sélecteurs CSS.
Sélecteurs de classes
Les « sélecteurs de classe » vous permettent d’appliquer des styles CSS à un élément HTML spécifique. Ils vous permettent de différencier les éléments HTML du même type, comme lorsque nous avions deux éléments <div> dans le chapitre précédent , mais que nous voulions seulement en styliser une. Les sélecteurs de classe nécessitent deux choses:
- Un attribut
classsur l’élément HTML en question. - Un sélecteur de classe CSS correspondant dans votre feuille de style.
Nous pouvons utiliser un sélecteur de classes pour styliser le premier paragraphe de notre page d’exemple différemment que le reste d’entre eux. Cela pourrait être, par exemple, le résumé d’un article de journal. Tout d’abord, ajoutons un attribut class au paragraphe désiré:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Selecteurs CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<h1>Selecteurs CSS</h1>
<p class='synopsis'>Les selecteur CSS vous permettent <em>de selectionner</em> des éléments HTM individuel. C'est <strong>très</strong> pratique.</p>
<p>Les classes sont très important car elle permettent de selectionner des boites de manière arbitraire au sein de la page.</p>
<p>On va également styliser des liens donc en voici un
<a href='https://e-artsup.fr'>E-Artsup</a>.
style.</p>
<div>BOUTON</div>
</body>
</html>Maintenant, nous pouvons selectionner cet élément <p class='synopsis'> dans notre CSS et le styliser (ajoutez ceci à styles.css):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.synopsis {
color: #7E8184; /* Light gray */
font-style: italic;
}Cette règle s’applique uniquement aux éléments avec l’ attribut class correspondant . Notez le point ( .) préfixant le nom de la classe. Ceci distingue les sélecteurs de classe des sélecteurs de type avec lesquels nous avons travaillé avant ce chapitre.
Conventions de dénomination de classe
La valeur de l’ attribut class HTML peut être (presque) tout ce que vous voulez tant qu’il correspond au sélecteur dans votre CSS. La convention de dénomination standard pour les classes consiste à n’utiliser que les minuscules et les tirets pour les espaces, tout comme les noms de fichier et de dossier.
L’ajout d’un attribut class n’altère en rien la signification sémantique de votre document HTML. Il est uniquement fait pour être utilisé par notre feuille de style CSS. Cependant, c’est toujours une bonne idée d’éviter de nommer les classes en fonction de leur apparence. Si nous choisissons de nommer notre classe .italic, nous ne serons pas en mesure de faire grand chose en plus de la mettre en italique dans notre CSS sans conduire à une situation confuse. L’utilisation de quelque chose de sémantique .synopsis nous donne plus de liberté pour que notre CSS puisse personnaliser l’affichage de ce synopsis.
Divs plus utiles
L’ attribut class n’est pas limité aux éléments <p> : il peut être défini sur n’importe quel élément HTML. Donc, armés de sélecteurs de classes CSS, nos génériques <div>et les boîtes <span> du chapitre précédent deviennent beaucoup plus utiles. Nous pouvons les utiliser pour styliser des éléments individuels ainsi que des sections arbitraires de notre page Web.
Commençons par les éléments individuels en recréant notre bouton du chapitre précédent. Cette fois, nous utiliserons une classe au lieu d’un sélecteur div . Ajoutez ce qui suit à styles.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.synopsis {
color: #7E8184; /* Light gray */
font-style: italic;
}
.button {
color: #FFF;
background-color: #5995DA; /* Blue */
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063; /* Dark gray */
border-radius: 5px;
width: 200px;
margin: 20px auto;
}Bien sûr, nous avons besoin d’un attribut class correspondant pour que cela fonctionne. Changez le <div> dans selectors.html pour faire correspondre les éléments suivants:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Selecteurs CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<h1>Selecteurs CSS</h1>
<p class='synopsis'>Les selecteur CSS vous permettent <em>de selectionner</em> des éléments HTM individuel. C'est <strong>très</strong> pratique.</p>
<p>Les classes sont très important car elle permettent de selectionner des boites de manière arbitraire au sein de la page.</p>
<p>On va également styliser des liens donc en voici un
<a href='https://e-artsup.fr'>E-Artsup</a>.
style.</p>
<div class='button'>BOUTON</div>
</body>
</html>Contrairement au chapitre précédent qui a stylisé tous les éléments <div> , cela nous permet de l’utiliser pour d’autres choses que des boutons.
Conteneurs
Rappelez-vous que lélément <div> ne modifie pas la structure sémantique d’une page. Cela en fait un excellent outil pour définir la structure de présentation d’une page Web. En enveloppant d’autres éléments HTML dans les balises <div> , nous pouvons organiser notre site en gros morceaux orientés mise en page sans pour autant gâcher la façon dont les moteurs de recherche visualisent notre contenu.
Essayons par exemple de créer une mise en page à largeur fixe en utilisant la technique de marge automatique que nous avons apprise dans le chapitre précédent. Tout d’abord, enveloppez notre document entier dans une <div> et donnez-lui un nom de classe unique:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Selecteurs CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='page'>
<h1>Selecteurs CSS</h1>
<p class='synopsis'>Les selecteur CSS vous permettent <em>de selectionner</em> des éléments HTM individuel. C'est <strong>très</strong> pratique.</p>
<p>Les classes sont très important car elle permettent de selectionner des boites de manière arbitraire au sein de la page.</p>
<p>On va également styliser des liens donc en voici un
<a href='https://e-artsup.fr'>E-Artsup</a>.
style.</p>
<div class='button'>BOUTON</div>
</div>
</body>
</html>Ensuite, ajoutez ce qui suit à styles.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.synopsis {
color: #7E8184; /* Light gray */
font-style: italic;
}
.button {
color: #FFF;
background-color: #5995DA; /* Blue */
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063; /* Dark gray */
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
.page {
width: 600px;
margin: 0 auto;
}Peu importe comment vous redimensionnez la fenêtre du navigateur, notre page Web sera toujours de 600 pixels de large et centrée dans l’espace disponible. Notez que nous avons procédé exactement de la même manière pour centré notre bouton, mais maintenant nous le faisons à plusieurs éléments en même temps en les imbriquant dans un conteneur générique.
C’est ainsi que les mises en page sont définies dans des pages Web plus complexes. Par exemple, si notre page avait une barre latérale, nous imbriquerions tous les éléments de la barre latérale dans une autre <div> avec une classe .sidebar. Nous verrons cela en action dans le prochain chapitre . Pour l’instant, la clé à retenir est que sans sélecteurs de classe pour différencier nos éléments <div>, rien de tout cela ne serait possible.
Réutiliser les styles de classe
La même classe peut être appliquée à plusieurs éléments dans un seul document HTML. Cela signifie que nous pouvons maintenant réutiliser des déclarations CSS arbitraires partout où nous voulons. Pour créer un autre bouton, tout ce que nous avons à faire est d’ajouter un autre élément HTML avec la même classe:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Selecteurs CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='page'>
<h1>Selecteurs CSS</h1>
<p class='synopsis'>Les selecteur CSS vous permettent <em>de selectionner</em> des éléments HTM individuel. C'est <strong>très</strong> pratique.</p>
<p>Les classes sont très important car elle permettent de selectionner des boites de manière arbitraire au sein de la page.</p>
<p>On va également styliser des liens donc en voici un
<a href='https://e-artsup.fr'>E-Artsup</a>.
style.</p>
<div class='button'>BOUTON</div>
<div class='button'>SECOND BOUTON</div>
</div>
</body>
</html>Cela nous donne un deuxième bouton qui ressemble au premier – sans écrire une seule ligne de CSS! Organiser des éléments graphiques similaires dans des règles CSS réutilisables comme celle-ci rend la vie beaucoup plus facile en tant que développeur Web. Si jamais nous voulions, disons, changer la couleur du bouton, nous n’aurions qu’à le faire au même endroit et tous nos boutons se mettraient automatiquement à jour.
modification des styles de classe
Et si nous voulons modifier un peu notre deuxième bouton? Heureusement, nous pouvons également appliquer plusieurs classes au même élément HTML. Les styles de chaque classe seront appliqués à l’élément, ce qui nous permettra à la fois de réutiliser des styles .button et de les remplacer par une nouvelle classe.
Allez-y et ajoutez une autre classe à notre deuxième bouton avec le balisage suivant. Notez comment plusieurs classes vivent dans le même attribut class , séparées par des espaces:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Selecteurs CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='page'>
<h1>Selecteurs CSS</h1>
<p class='synopsis'>Les selecteur CSS vous permettent <em>de selectionner</em> des éléments HTM individuel. C'est <strong>très</strong> pratique.</p>
<p>Les classes sont très important car elle permettent de selectionner des boites de manière arbitraire au sein de la page.</p>
<p>On va également styliser des liens donc en voici un
<a href='https://e-artsup.fr'>E-Artsup</a>.
style.</p>
<div class='button'>BOUTON</div>
<div class='button call-to-action'>SECOND BOUTON</div>
</div>
</body>
</html>Cet élément a maintenant deux classes séparées, et nous pouvons utiliser l’une ou l’autre pour le styliser. Cela ouvre quelques options. Les styles partagés par les deux boutons peuvent vivre dans la classe .button (comme ils le font déjà), et les styles spécifiques au deuxième bouton résident dans la classe .call-to-action (assurez-vous d’ajouter ceci après la règle .button):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.synopsis {
color: #7E8184; /* Light gray */
font-style: italic;
}
.button {
color: #FFF;
background-color: #5995DA; /* Blue */
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063; /* Dark gray */
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
.page {
width: 600px;
margin: 0 auto;
}
.call-to-action {
font-style: italic;
background-color: #EEB75A; /* JAUNE */
}questions d’ordre
Il ce passe deux choses importantes:
- Il ajoute une nouvelle
font-styleà la règle d’ origine . - Il remplace un
background-colordans le style existant .
Le remplacement se produit en raison de l’ordre de .call-to-action et .button dans notre feuille de style. Lorsqu’il y a deux propriétés conflictuelles dans un fichier CSS, la dernière est toujours celle qui est appliquée. Donc, si vous déplaciez .call-to-action en haut de styles.css , .button aurait le dernier mot sur la valeur de background-color , et il resterait bleu.
Cela signifie que l’ordre de l’ attribut class dans notre élément HTML n’a aucun effet sur le comportement de remplacement. Les classes multiples sur un seul élément sont appliquées « à égalité » (faute d’un meilleur terme), donc la préséance est déterminée uniquement par l’ordre des règles dans styles.css. En d’autres termes, les éléments suivants sont effectivement équivalents:
<div class='button call-to-action'>SECOND BOUTON</div>
<div class='call-to-action button'>SECOND BOUTON</div>Sélecteurs descendant
Vous avez peut-être remarqué que le la balise <em>de notre premier paragraphe ne se distingue plus de son texte encadré, puisque la classe .synopsis rend tout le texte en italique.
Pour modifier cet élément <em> , nous pourrions lui ajouter directement une autre classe, mais cela n’aboutirait pas à un code très maintenable. Nous voulons traiter .synopsis comme un composant indépendant que nous pouvons entièrement styliser via CSS.
Les « sélecteurs descendants ». vous permettent de cibler uniquement les éléments qui sont à l’ intérieur d’un autre élément. Par exemple, nous pouvons selectionner l’élément <em> dans le paragraphe .synopsis avec ce qui suit:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.synopsis {
color: #7E8184; /* Light gray */
font-style: italic;
}
.synopsis em {
font-style: normal;
}
.button {
color: #FFF;
background-color: #5995DA; /* Blue */
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063; /* Dark gray */
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
.page {
width: 600px;
margin: 0 auto;
}
.call-to-action {
font-style: italic;
background-color: #EEB75A; /* JAUNE */
}L’ajout de cette règle nous permet de différencier cette élément des italiques que nous mettons sur l’ensemble du texte. Le reste des éléments <em> de la page ne seront pas affectés.
Les sélecteurs descendants ne sont pas limités aux sélecteurs de classe. Vous pouvez ainsi combiner n’importe quel autre groupe de sélecteurs. Par exemple, si nous voulions sélectionner uniquement des éléments <em> à l’intérieur des titres, nous pourrions utiliser quelque chose comme ceci:
h1 em {
/* d'autres styles */
}Encore une fois, le but de ce chapitre est de vous permettre d’appliquer des styles exactement à l’élément que vous voulez. Les sélecteurs descendants sont un excellent outil à cette fin. Vous pouvez également consulter le « sélecteur d’enfants » associé sur le site MDN si vous avez encore de la place dans votre boîte à outils.
N’en faites pas trop
Vous pouvez imbriquer les sélecteurs descendants aussi profondément que vous le souhaitez, mais ne vous laissez pas emporter. Les choses deviennent confuses quand vous commencez à écrire des règles qui ressemblent à ceci:
/* Essayer d'eviter ce type de sélecteur */
.article h2 .subheading em {
}Il n’est pas réutilisable car il ne correspond qu’à la structure HTML suivante:
<div class='article'>
<h2>
<span class='.subheading'>Ceci est un texte <em>vraiment</em> special</span>
</h2>
</div>Si vous voulez appliquer ces styles à un titre <h2> qui n’est pas enveloppé dans des balises <div class='article'> , vous êtes foutu. Même chose si vous voulez les appliquer à un titre <h3> n’importe où sur la page.
Pseudo-classes pour les liens
Jusqu’à présent, tous les sélecteurs CSS que nous avons vu correspondent directement à une balise HTML que nous avons écrite. Cependant, il y a plus de choses dans une page Web rendue que dans notre contenu HTML. Il y a des informations « stateful » sur ce que fait l’utilisateur (par opposition au contenu que nous avons créé).
L’exemple classique est un lien. En tant que développeur Web, vous créez un élément <a href> . Une fois le navigateur rendu, l’utilisateur peut interagir avec ce lien. Ils peuvent passer la souris dessus, cliquer dessus et visiter l’URL.
CSS « pseudo-classes » fournissent un mécanisme pour selectionner ce genre d’informations utilisateur temporaires. À tout moment, un élément <a href> peut être dans plusieurs états différents, et vous pouvez utiliser des pseudo-classes pour les styliser individuellement. Considérez-les comme des sélecteurs de classe que vous n’avez pas à écrire par vous-même, car ils sont intégrés au navigateur.
CSS « pseudo-classes » fournissent un mécanisme pour selectionner ce genre d’informations utilisateur temporaires. À tout moment, un élément <a href> peut être dans plusieurs états différents, et vous pouvez utiliser des pseudo-classes pour les styliser individuellement. Considérez-les comme des sélecteurs de classe que vous n’avez pas à écrire par vous-même, car ils sont intégrés au navigateur.
Styles de lien de base
Les pseudo-classes commencent par un deux-points suivi du nom de la classe désirée. Les pseudo-classes de liens les plus courantes sont les suivantes:
:link– Un lien que l’utilisateur n’a jamais visité.:visited– Un lien que l’utilisateur a déjà visité.:hover– Un lien avec la souris de l’utilisateur dessus.:active– Un lien qui est pressé par une souris (ou un doigt).
Jetons un coup d’oeil à tout cela en ajoutant les règles suivantes à notre feuille de style CSS (notez aussi notre utilisation de couleurs de mot – clé au lieu de nos codes hexadécimaux habituels):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.synopsis {
color: #7E8184; /* Light gray */
font-style: italic;
}
.synopsis em {
font-style: normal;
}
.button {
color: #FFF;
background-color: #5995DA; /* Blue */
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063; /* Dark gray */
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
.page {
width: 600px;
margin: 0 auto;
}
.call-to-action {
font-style: italic;
background-color: #EEB75A; /* JAUNE */
}
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: aqua;
text-decoration: underline;
}
a:active {
color: red;
}Si vous n’avez jamais visité la page d’accueil www.mydigitalschool.com/ , vous devriez voir un lien bleu. Sinon, vous verrez un lien violet. Lorsque vous passez la souris sur le lien, cela devient de l’aqua, et quand vous appuyez dessus, il devient rouge.
Visité hover state
Nous pouvons encore affiner nos liens en enchaînant des pseudo-classes ensemble. Ajoutez ceci sous l’extrait précédent:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.synopsis {
color: #7E8184; /* Light gray */
font-style: italic;
}
.synopsis em {
font-style: normal;
}
.button {
color: #FFF;
background-color: #5995DA; /* Blue */
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063; /* Dark gray */
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
.page {
width: 600px;
margin: 0 auto;
}
.call-to-action {
font-style: italic;
background-color: #EEB75A; /* JAUNE */
}
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: aqua;
text-decoration: underline;
}
a:active {
color: red;
}
a:visited:hover {
color: orange;
}Cela crée un style de vol stationnaire dédié pour les liens visités. Passer la souris sur un lien non visité le change en aqua, tandis que le survol d’un lien visité le rend orange. Fantastique! Sauf pour le fait que cela casse notre style a:active en raison de certains CSS internes complexes que vous ne voudrez jamais connaitre. Lorsque vous cliquez, notre lien ne devient plus rouge.
Etat actif visité
Nous pouvons résoudre ce problème avec a:visited:active. Ajoutez ce qui suit à la fin de notre feuille de style. Notez que, comme pour notre classe .call-to-action , l’ordre dans lequel ils sont définis dans styles.css compte:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.synopsis {
color: #7E8184; /* Light gray */
font-style: italic;
}
.synopsis em {
font-style: normal;
}
.button {
color: #FFF;
background-color: #5995DA; /* Blue */
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063; /* Dark gray */
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
.page {
width: 600px;
margin: 0 auto;
}
.call-to-action {
font-style: italic;
background-color: #EEB75A; /* JAUNE */
}
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: aqua;
text-decoration: underline;
}
a:active {
color: red;
}
a:visited:hover {
color: orange;
}
a:visited:active {
color: red;
}Ces deux dernières sections vous permettent de personnaliser les liens visités séparément des liens non consultés.
Pseudo-classes pour les boutons
Les pseudo-classes ne sont pas seulement destinées aux styles de liens de texte, elles peuvent être appliquées à n’importe quel type de sélecteur (pas seulement aux sélecteurs de type). Au lieu de styliser a:link , nous allons modifier notre classe .button avec des pseudo-classes dans cette section. Cela nous permettra de créer des boutons utilisables.
Eléments de liaison, éléments non divisés
D’abord, nous devons changer nos boutons pour qu’ils deviennent des éléments <a href> au lieu d’être des éléments <div> génériques , comme indiqué ci-dessous:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Selecteurs CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='page'>
<h1>Selecteurs CSS</h1>
<p class='synopsis'>Les selecteur CSS vous permettent <em>de selectionner</em> des éléments HTM individuel. C'est <strong>très</strong> pratique.</p>
<p>Les classes sont très important car elle permettent de selectionner des boites de manière arbitraire au sein de la page.</p>
<p>On va également styliser des liens donc en voici un
<a href='https://e-artsup.fr'>E-Artsup</a>.
style.</p>
<a class='button' href='nowhere.html'>BOUTON</a>
<a class='button call-to-action' href='nowhere.html'>SECOND BOUTON</a>
</div>
</body>
</html>Si vous rechargez ceci dans votre navigateur, vous verrez que nous avons perdu certains de nos styles même si nous utilisons les mêmes classes. C’est parce que l’élément <a> est un élément en ligne par défaut et a également une valeur color par défaut .
Nous devons le remplacer par un élément de bloc et supprimer une partie du style de lien par défaut.
Styles de boutons
Commençons par les variantes :linket :visited . Nous utilisons un modèle similaire à celui de la section précédente, mais étant donné que ce sont des boutons, nous voulons conserver la couleur des éléments non visitées et la couleur visitées. Modifiez les règles .button existantes pour qu’elles correspondent aux éléments suivants:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.synopsis {
color: #7E8184; /* Light gray */
font-style: italic;
}
.synopsis em {
font-style: normal;
}
.button {
color: #FFF;
background-color: #5995DA; /* Blue */
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063; /* Dark gray */
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
.button:link,
.button:visited {
display: block;
text-decoration: none;
color: #FFF;
background-color: #5995DA;
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063;
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
.button:hover,
.button:visited:hover {
color: #FFF;
background-color: #76AEED; /* Light blue */
}
.button:active,
.button:visited:active {
color: #FFF;
background-color: #5995DA; /* Blue */
}
.page {
width: 600px;
margin: 0 auto;
}
.call-to-action {
font-style: italic;
background-color: #EEB75A; /* JAUNE */
}
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: aqua;
text-decoration: underline;
}
a:active {
color: red;
}
a:visited:hover {
color: orange;
}
a:visited:active {
color: red;
}Notez les nouvelles pseudo-classes :linket :visited dans le sélecteur. Sans cela, nous ne remplacerions pas la propriété par defaut color de a:link .
Nos deux boutons seront d’un bleu plus clair en stationnaire. Enfin, faisons un peu plus sombre lorsque l’utilisateur appuie sur la souris avec la pseudo-classe :active :
Le grand avantage de cette méthode est que tous les styles que nous venons de définir sont entièrement réutilisables. Collez la classe .button sur n’importe quel élément HTML et vous le transformerez en bouton interactif.
L’autre bouton
Maintenant, qu’en est-il de ce second bouton? Il est censé avoir un fond jaune, mais nous l’avons cassé avec le code de la section précédente. Notre sélecteur .button:link étant plus «spécifique» que notre classe .call-to-action, il a pris le dessus. Nous explorerons cela plus en détail à la fin du chapitre.
Pour l’instant, corrigeons le problème en appliquant des pseudo-classes à notre .call-to-action. Remplacez la règle existante par la suivante (assurez-vous que cela apparaît après les nouveaux styles .button de la section précédente):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.synopsis {
color: #7E8184; /* Light gray */
font-style: italic;
}
.synopsis em {
font-style: normal;
}
.button {
color: #FFF;
background-color: #5995DA; /* Blue */
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063; /* Dark gray */
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
.button:link,
.button:visited {
display: block;
text-decoration: none;
color: #FFF;
background-color: #5995DA;
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063;
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
.button:hover,
.button:visited:hover {
color: #FFF;
background-color: #76AEED; /* Light blue */
}
.button:active,
.button:visited:active {
color: #FFF;
background-color: #5995DA; /* Blue */
}
.call-to-action:link,
.call-to-action:visited {
font-style: italic;
background-color: #EEB75A; /* Yellow */
}
.call-to-action:hover,
.call-to-action:visited:hover {
background-color: #F5CF8E; /* Light yellow */
}
.call-to-action:active,
.call-to-action:visited:active {
background-color: #EEB75A; /* Yellow */
}
.page {
width: 600px;
margin: 0 auto;
}
.call-to-action {
font-style: italic;
background-color: #EEB75A; /* JAUNE */
}
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: aqua;
text-decoration: underline;
}
a:active {
color: red;
}
a:visited:hover {
color: orange;
}
a:visited:active {
color: red;
}Puisque nous avons seulement ajouté la classe .call-to-action à notre deuxième bouton, c’est le seul qui deviendra jaune. Bien sûr, nous avons toujours besoin de la classe .button sur les deux éléments <a> car elle définit des styles partagés tels que le remplissage, le rayon de la bordure et le poids de la police.
Pseudo-classes pour la structure
Les états de lien ne sont qu’un aspect des pseudo-classes. Il y a aussi un tas d’autres pseudo-classes qui fournissent des informations supplémentaires sur l’environnement d’un élément. Par exemple, la pseudo-classe :last-of-type sélectionne l’élément final d’un type particulier dans son élément parent. Cela nous donne une alternative aux sélecteurs de classe pour sélectionner des éléments spécifiques.
Par exemple, nous pourrions utiliser :last-of-type pour ajouter de l’espace après le dernier paragraphe de notre page d’exemple:
p:last-of-type {
margin-bottom: 50px;
}Cela évite de sélectionner les deux premiers éléments <p> sans nécessiter un nouvel attribut class sur le dernier paragraphe:
Nous pourrions même utiliser une pseudo-classe :first-of-type à la place de notre classe .synopsis . Le remplacement de la classe .synopsis existante par l’extrait suivant devrait aboutir à exactement la même page.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p:first-of-type {
color: #7E8184;
font-style: italic;
}
p:last-of-type {
margin-bottom: 50px;
}
.synopsis em {
font-style: normal;
}
.button {
color: #FFF;
background-color: #5995DA; /* Blue */
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063; /* Dark gray */
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
.button:link,
.button:visited {
display: block;
text-decoration: none;
color: #FFF;
background-color: #5995DA;
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063;
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
.button:hover,
.button:visited:hover {
color: #FFF;
background-color: #76AEED; /* Light blue */
}
.button:active,
.button:visited:active {
color: #FFF;
background-color: #5995DA; /* Blue */
}
.call-to-action:link,
.call-to-action:visited {
font-style: italic;
background-color: #EEB75A; /* Yellow */
}
.call-to-action:hover,
.call-to-action:visited:hover {
background-color: #F5CF8E; /* Light yellow */
}
.call-to-action:active,
.call-to-action:visited:active {
background-color: #EEB75A; /* Yellow */
}
.page {
width: 600px;
margin: 0 auto;
}
.call-to-action {
font-style: italic;
background-color: #EEB75A; /* JAUNE */
}
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: aqua;
text-decoration: underline;
}
a:active {
color: red;
}
a:visited:hover {
color: orange;
}
a:visited:active {
color: red;
}Il y a des avantages et des inconvénients à utiliser cette méthode par rapport aux vieilles classes. Par exemple, cela ne fonctionne que si notre synopsis est un élément <p> . D’un autre côté, la méthode de pseudo-classe permet de styliser des éléments spécifiques sans avoir à modifier le code HTML. Cela nous donne une séparation très nette du contenu de la présentation.
Avertissements
Ok, alors en fait la méthode de pseudo-classe est un peu plus compliquée. Ils sont toujours un outil utile, du moment que vous connaissez leurs tenants et aboutissants. Les sélecteurs :first-of-type et :last-of-type fonctionnent uniquement à l’intérieur de leur élément parent. C’est-à-dire, p:first-of-type sélectionne le premier <p>dans chaque élément de conteneur.
Nous avons une seule <div>enveloppant notre contenu ( .page), donc ce n’est pas un problème pour nous. Cependant, considérons ce qui se passe lorsque nous ajoutons ceci au bas de notre élément .page :
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Selecteurs CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='page'>
<h1>Selecteurs CSS</h1>
<p class='synopsis'>Les selecteur CSS vous permettent <em>de selectionner</em> des éléments HTM individuel. C'est <strong>très</strong> pratique.</p>
<p>Les classes sont très important car elle permettent de selectionner des boites de manière arbitraire au sein de la page.</p>
<p>On va également styliser des liens donc en voici un
<a href='https://e-artsup.fr'>E-Artsup</a>.
style.</p>
<a class='button' href='nowhere.html'>BOUTON</a>
<a class='button call-to-action' href='nowhere.html'>SECOND BOUTON</a>
<div class='sidebar'>
<p>Si cette page a une sidebar...</p>
<p>Nous aurons des problème avec la technique des pseudo-classes.</p>
</div>
</div>
</body>
</html>Nous ne serons pas en mesure de faire une vraie barre latérale jusqu’au prochain chapitre , mais cela met en évidence les complications des pseudo-classes pour la structure. Le premier élément <p> correspondra également à p:first-of-type car la portée de la pseudo-classe est limitée à l’élément parent.
Si vous voulez éviter les paragraphes de la barre latérale et ne sélectionner que le premier <p> dans notre <div class='page'>, vous devez en limiter la portée à l’aide d’un sélecteur enfant , comme suit:
.page > p:first-of-type {
color: #7E8184;
font-style: italic;
}Ce ci illustre le fait qu’il existe plusieurs façons de faire la même chose dans le monde merveilleux du HTML et du CSS. Différents développeurs adhèrent à différentes écoles de pensée. Certains aiment la nature sémantique des pseudo-classes, tandis que d’autres vont à l’extrême avec des attributs class explicites sur chaque élément HTML.
Sélecteurs d’id
Les « sélecteurs d’ID » sont une alternative plus stricte aux sélecteurs de classe. Ils fonctionnent à peu près de la même manière, sauf que vous ne pouvez avoir qu’un seul élément avec le même ID par page, ce qui signifie que vous ne pouvez pas réutiliser les styles du tout. Au lieu d’un attribut class , ils nécessitent un attribut id sur tout élément HTML que vous essayez de sélectionner. Essayez d’en ajouter un à notre deuxième bouton:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Selecteurs CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='page'>
<h1>Selecteurs CSS</h1>
<p class='synopsis'>Les selecteur CSS vous permettent <em>de selectionner</em> des éléments HTM individuel. C'est <strong>très</strong> pratique.</p>
<p>Les classes sont très important car elle permettent de selectionner des boites de manière arbitraire au sein de la page.</p>
<p>On va également styliser des liens donc en voici un
<a href='https://e-artsup.fr'>E-Artsup</a>.
style.</p>
<a class='button' href='nowhere.html'>BOUTON</a>
<a id='button-2' class='button call-to-action' href='nowhere.html'>SECOND BOUTON</a>
<div class='sidebar'>
<p>Si cette page a une sidebar...</p>
<p>Nous aurons des problème avec la technique des pseudo-classes.</p>
</div>
</div>
</body>
</html>Le sélecteur CSS correspondant doit commencer par un signe dièse ( #) . Ajoutez de ce qui suit à styles.css afin de changer la couleur du texte de notre bouton jaune:
#button-2 {
color: #5D6063; /* Dark gray */
}Le problème est que, si nous voulions partager ce style avec un autre bouton, nous devions lui donner un autre attribut id unique . Très bientôt, notre CSS commencerait à avoir l’air plutôt complexe:
/* Ceci est dur à maintenir */
#button-2,
#button-3,
#checkout-button,
#menu-bar-call-to-action {
color: #5D6063;
}Pour cette raison, les sélecteurs d’ID sont généralement désapprouvés. Utilisez des sélecteurs de classe à la place.
Fragments d’url
Les attributs id doivent être uniques car ils servent de cible pour les «fragments d’URL», dont nous avons un petit peu parlé dans notre discussion sur les URL . Grâce aux fragments vous dirigez l’utilisateur vers une partie spécifique d’une page Web. Ils ressemblent à un sélecteur d’identifiant placé à la fin d’une URL.
Par exemple, si nous voulions pointer l’utilisateur vers notre deuxième bouton, nous pourrions utiliser ce qui suit. Notez que nous pouvons omettre complètement l’URL si nous lions une section différente sur la même page:
<a href='#button-2'>ALLER AU BOUTON 2</a>
<a href='selectors.html#button-2'>ALLER AU BOUTON 2</a>Si vous ajoutez la première option à notre page selectors.html et cliquez dessus, vous verrez l’URL dans le navigateur changer. Pour le voir sauter directement au second bouton, vous devrez ajouter un peu de contenu fictif à la page ou réduire la hauteur de la fenêtre, car le navigateur limitera le défilement à la page visible.
Spécificité css
Plus tôt dans ce chapitre, nous avons parlé de l’ importance de l’ordre pour les règles CSS dans une feuille de style externe. Toutes choses égales par ailleurs, les règles sont appliquées de haut en bas.
Malheureusement, tous les sélecteurs CSS ne sont pas créés égaux. La « spécificité CSS » est le poids accordé aux différentes catégories de sélecteurs. Cela signifie que certains sélecteurs remplaceront toujours les autres, quel que soit leur emplacement dans la feuille de style.
Sélecteurs d’identification ont une spécificité plus élevée que les sélecteurs de classe, donc ce sera tourner notre deuxième bouton rouge , même si nous essayons de régler le background-coloravec .call-to-action:linkplus tard dans notre feuille de style. Le concept « l’ordre importe » ne fonctionne que lorsque toutes vos règles ont la même spécificité.
La spécificité des sélecteurs que nous avons vu dans ce chapitre sont montrés ci-dessous, du plus grand au moins:
a
#button-2
.button:link
a:link et .synopsis em(ils sont égaux)
.button
a
Conclusion
Dans ce chapitre, nous avons acquis une expérience pratique des sélecteurs de classes, des sélecteurs descendants, des pseudo-classes, du style de lien et des sélecteurs d’ID. Le but de tout cela était de pouvoir cibler un élément HTML spécifique dans votre CSS. Les sélecteurs de classe sont de loin les plus polyvalents et présentent le moins d’inconvénients. En conséquence, ils feront partie de votre vie quotidienne en tant que développeur web.
Qu’on le veuille ou non, les choses se compliquent beaucoup. Nous sommes maintenant en mesure de faire interagir notre CSS avec un document HTML d’une demi-douzaine de façons différentes. En outre, au cours des prochains chapitres, nous commencerons à voir une dépendance entre la structure de notre HTML et la mise en page d’une page Web. Avec toute cette interaction entre CSS et HTML, il peut être difficile de savoir par où commencer la construction d’une nouvelle page Web.
La séparation du contenu de la présentation aide à guider ce processus. Vous avez besoin de contenu avant de pouvoir le présenter. La première étape consiste donc généralement à marquer votre contenu brut avec des balises HTML. Une fois cela fait, vous êtes prêt à ajouter des attributs class à vos éléments et à les styliser un par un. Lorsque vous avez besoin d’une structure supplémentaire pour créer une disposition souhaitée (par exemple, transformer un groupe d’éléments en une barre latérale), c’est à ce moment-là que vous commencez à envelopper votre contenu dans les conteneurs <div>.
Ce chapitre couvre presque tous les sélecteurs CSS qui alimentent les sites web réels. Nous avons les outils dont nous avons besoin pour plonger plus profondément dans des mises en page CSS complexes. Dans le prochain chapitre , nous apprendrons comment créer des colonnes et des sidebars en utilisant les floats CSS.