CSS - Sélecteurs d'attributs : Déploier la puissance du style précis

Bonjour là-bas, futurs magiciens du CSS ! Aujourd'hui, nous plongeons dans le monde magique des sélecteurs d'attributs CSS. Attachez vos ceintures, car nous allons entreprendre un voyage qui va transformer la manière dont vous stylez vos pages web. En tant que votre gentil voisin教授 d'informatique, je suis là pour vous guider à travers cette aventure avec un tas d'exemples, des explications, et peut-être même un ou deux jeux de père. C'est parti !

Description

Avant de sauter dans le grand bain, parlons des sélecteurs d'attributs et de pourquoi ils sont si géniaux. Imaginez que vous êtes à une énorme fête (le document HTML), et que vous cherchez toutes les personnes qui portent des chaussures rouges (éléments avec un attribut spécifique). Les sélecteurs d'attributs sont comme votre detective personnel de la fête, vous aidant à cibler précisément ce que vous cherchez sans perturber toute la foule.

En CSS, les sélecteurs d'attributs nous permettent de cibler des éléments HTML en fonction de leurs attributs ou valeurs d'attributs. Cela nous offre une flexibilité et une précision incroyables dans notre stylisation, sans avoir besoin de classes ou d'IDs supplémentaires. C'est comme avoir un couteau suisse pour votre CSS - polyvalent, précis et tellement pratique !

Maintenant, explorons les différents types de sélecteurs d'attributs, shall we ?

Sélecteur CSS [attribute]

Le sélecteur le plus basique est le sélecteur [attribute]. Il cible n'importe quel élément qui a l'attribut spécifié, indépendamment de sa valeur.

<a href="https://www.example.com">Cliquez ici !</a>
<a>Juste du texte</a>

<style>
[href] {
color: blue;
text-decoration: none;
}
</style>

Dans cet exemple, seul le premier lien deviendra bleu et perdra son soulignement, car il a l'attribut href. Le second <a> restera inchangé. C'est comme trouver tous les participants à la fête avec des étiquettes de nom, indépendamment de leurs noms !

Sélecteur CSS [attribute="value"]

Lorsque vous souhaitez être plus précis, le sélecteur [attribute="value"] vient à la rescousse. Il cible les éléments où l'attribut correspond exactement à la valeur.

<input type="text" placeholder="Entrez votre nom">
<input type="password" placeholder="Entrez votre mot de passe">

<style>
[type="password"] {
border: 2px solid red;
}
</style>

Ici, seul l'input de mot de passe aura une bordure rouge. C'est comme trouver tous les VIPs à la fête avec des bracelets dorés !

Sélecteur CSS [attribute*="value"]

Le sélecteur [attribute*="value"] est comme un chien de chasse - il renifle n'importe quel élément où la valeur de l'attribut contient le sous-stitre spécifié, n'importe où dedans.

<p title="J'aime le CSS">Paragraphe 1</p>
<p title="HTML est cool">Paragraphe 2</p>
<p title="JavaScript déchire">Paragraphe 3</p>

<style>
[title*="CSS"] {
font-weight: bold;
}
</style>

Dans ce cas, seul "Paragraphe 1" deviendra gras, car son titre contient "CSS". C'est comme trouver quelqu'un à la fête dont le nom contient "Smith", que ce soit John Smith, Smithson ou Blacksmith !

Sélecteur CSS [attribute^="value"]

Le sélecteur [attribute^="value"] est sélectif - il ne sélectionne que les éléments où la valeur de l'attribut commence par la valeur spécifiée.

<a href="https://www.example.com">Lien HTTPS</a>
<a href="http://www.example.com">Lien HTTP</a>

<style>
[href^="https"] {
color: green;
}
</style>

Seul le lien HTTPS deviendra vert. C'est comme trouver tous les participants à la fête dont les noms commencent par "A" !

Sélecteur CSS [attribute$="value"]

À l'inverse, le sélecteur [attribute$="value"] cible les éléments où la valeur de l'attribut se termine par la valeur spécifiée.

<a href="document.pdf">Document PDF</a>
<a href="image.jpg">Image JPG</a>

<style>
[href$=".pdf"] {
background-color: yellow;
}
</style>

Le lien PDF aura un fond jaune. C'est comme trouver tous les participants à la fête dont les noms de famille se terminent par "son" !

Sélecteur CSS [attribute|="value"]

Le sélecteur [attribute|="value"] est un peu unique. Il sélectionne les éléments où la valeur de l'attribut est exactement "value" ou commence par "value" immédiatement suivi d'un tiret.

<p lang="en">English</p>
<p lang="en-US">American English</p>
<p lang="fr">French</p>

<style>
[lang|="en"] {
font-style: italic;
}
</style>

"English" et "American English" seront en italique. C'est parfait pour le style spécifique aux langues !

Sélecteur CSS [attribute~="value"]

Le sélecteur [attribute~="value"] cible les éléments où la valeur de l'attribut contient le mot spécifié, entouré d'espaces.

<p class="fruit apple">Pomme</p>
<p class="fruit orange">Orange</p>
<p class="vegetable carrot">Carotte</p>

<style>
[class~="fruit"] {
color: purple;
}
</style>

"Apple" et "Orange" deviendront violets. C'est comme trouver tous les participants à la fête qui ont "danseur" comme l'un de leurs loisirs !

Sélecteurs d'attributs pour les liens href

Les sélecteurs d'attributs sont particulièrement utiles pour styler les liens en fonction de leurs destinations :

<a href="https://www.example.com">Lien externe</a>
<a href="/internal-page">Lien interne</a>
<a href="document.pdf">Document PDF</a>

<style>
a[href^="https"] {
color: green;
}
a[href^="/"] {
color: blue;
}
a[href$=".pdf"] {
color: red;
}
</style>

Ce code donne différentes couleurs aux liens externes, internes et aux liens PDF.

Sélecteurs d'attributs pour les inputs

Les sélecteurs d'attributs brillent lorsque vous travaillez avec des inputs de formulaire :

<input type="text" required>
<input type="email">
<input type="checkbox" checked>

<style>
input[required] {
border: 2px solid red;
}
input[type="email"] {
background-color: lightblue;
}
input[checked] {
outline: 2px solid green;
}
</style>

Cette stylisation fait ressortir les champs obligatoires, donne un fond bleu clair aux inputs email, et surligne les cases à cocher cochées.

Sélecteurs d'attributs pour le title

Nous pouvons utiliser les sélecteurs d'attributs pour styler les éléments en fonction de leurs attributs title :

<div title="Important">Ceci est important</div>
<div title="Read more">Cliquez pour développer</div>

<style>
[title="Important"] {
font-weight: bold;
color: red;
}
[title*="more"] {
cursor: pointer;
text-decoration: underline;
}
</style>

Cela fait ressortir le contenu important et indique les éléments cliquables.

Sélecteurs d'attributs pour la langue

Le style spécifique à la langue est un jeu d'enfant avec les sélecteurs d'attributs :

<p lang="en">Hello, World!</p>
<p lang="es">¡Hola, Mundo!</p>
<p lang="fr">Bonjour, le Monde!</p>

<style>
[lang="en"] {
font-family: 'Arial', sans-serif;
}
[lang="es"] {
font-style: italic;
}
[lang="fr"] {
font-weight: bold;
}
</style>

Cela applique différents styles au contenu dans différentes langues.

Sélecteurs CSS multiples

Vous pouvez combiner plusieurs sélecteurs d'attributs pour une cible encore plus précise :

<a href="https://www.example.com" target="_blank" rel="noopener">Lien externe sécurisé</a>
<a href="https://www.example.com">Lien externe régulier</a>

<style>
a[href^="https"][target="_blank"] {
color: green;
text-decoration: none;
}
</style>

Cela style uniquement les liens externes qui s'ouvrent dans un nouvel onglet.

Sélecteurs CSS avec le combinatoire de frère

Les sélecteurs d'attributs peuvent être combinés avec d'autres sélecteurs pour un style avancé :

<label for="name">Nom :</label>
<input id="name" type="text" required>
<span class="error">Veuillez entrer votre nom</span>

<style>
input[required] + span.error {
display: none;
color: red;
}
input[required]:invalid + span.error {
display: inline;
}
</style>

Cela affiche un message d'erreur à côté des champs obligatoires uniquement lorsqu'ils sont invalides.

Et voilà, les amis ! Un guide complet sur les sélecteurs d'attributs CSS. Souvenez-vous, la pratique fait toujours perfection, donc n'ayez pas peur d'expérimenter avec ces sélecteurs dans vos projets. Ils sont comme des ingrédients secrets qui peuvent transformer votre CSS du bon au grandiose !

Avant de clore, voici un tableau pratique résumant tous les sélecteurs d'attributs que nous avons couverts :

Sélecteur	Exemple	Description
[attribute]	[href]	Sélectionne les éléments avec l'attribut spécifié
[attribute="value"]	[type="text"]	Sélectionne les éléments avec l'attribut et la valeur spécifiés
[attribute*="value"]	[title*="hello"]	Sélectionne les éléments dont la valeur de l'attribut contient la valeur spécifiée
[attribute^="value"]	[href^="https"]	Sélectionne les éléments dont la valeur de l'attribut commence par la valeur spécifiée
[attribute$="value"]	[href$=".pdf"]	Sélectionne les éléments dont la valeur de l'attribut se termine par la valeur spécifiée
[attribute	="value"]	[lang
[attribute~="value"]	[class~="fruit"]	Sélectionne les éléments dont la valeur de l'attribut contient le mot spécifié, entouré d'espaces

Bonne programmation, et que le sélecteur soit avec vous !

Credits: Image by storyset