Sélecteurs génériques (*, ^ et $) en CSS pour les classes
En CSS, les sélecteurs sont utilisés pour sélectionner des éléments par nom de classe, identifiant, balise, etc. Il existe également des sélecteurs génériques disponibles en CSS que nous pouvons utiliser pour définir des requêtes qui sélectionnent des éléments HTML.
Les sélecteurs de caractères génériques nous permettent de sélectionner des éléments HTML qui contiennent une sous-chaîne spécifique dans la valeur d'un attribut spécifique (tel qu'une classe ou un identifiant). Dans ce didacticiel, nous apprendrons à utiliser les sélecteurs génériques *, ^ et $ pour représenter les classes et les identifiants.
CSS contient (*=) un sélecteur de caractère générique
Le sélecteur de caractère générique Contient (*=) permet aux développeurs de rechercher tous les éléments HTML dont la valeur d'attribut contient « chaîne » comme sous-chaîne. Par exemple, l'utilisation du sélecteur de caractère générique "*" sur une classe recherche tous les éléments HTML dont le nom de classe contient cette chaîne.
Grammaire
Les utilisateurs peuvent utiliser des sélecteurs génériques contenant (*) pour les classes selon la syntaxe suivante.
[class*="string"] {
}
La syntaxe ci-dessus sélectionne tous les éléments HTML qui contiennent « chaîne » comme sous-chaîne dans le nom de la classe.
Exemple
Dans l'exemple ci-dessous, nous avons créé quatre éléments div différents et y avons ajouté du texte en fonction de leurs noms de classe. En CSS, nous utilisons le sélecteur de caractère générique « contient » pour sélectionner tous les éléments div dont le nom de classe contient « test » comme sous-chaîne.
Dans la sortie, l'utilisateur peut observer que la couleur du texte des deux premiers éléments div est rouge car il contient le nom de la classe avec la sous-chaîne "test".
<html>
<head>
<style>
[class*="test"] {
color: red;
font-size: 2rem;
}
</style>
</head>
<body>
<h2 id="Using-the-i-contains-i-wildcard-CSS-selector-in-CSS"> Using the <i> contains (*=) </i> wildcard CSS selector in CSS. </h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "demo"> This is a text with the class name demo test. </div>
<div class = "element"> This is a text with the class name element.</div>
</body>
</html>
Sélecteurs de caractères génériques CSS commençant par (^=)
Commençant par (^=) les sélecteurs de caractères génériques nous permettent de sélectionner tous les éléments HTML dont les valeurs d'attribut commencent par une sous-chaîne spécifique.
Grammaire
Les utilisateurs peuvent utiliser des sélecteurs commençant par des caractères génériques pour les classes selon la syntaxe suivante.
[class^="string"] {
}
La syntaxe ci-dessus sélectionne tous les éléments HTML dont le nom de classe commence par "string".
Exemple
Dans l'exemple ci-dessous, nous avons utilisé des sélecteurs CSS génériques commençant par (^=) et des classes pour sélectionner des éléments en fonction des noms de classe.
Dans la sortie, l'utilisateur peut observer que le texte des premier et troisième éléments div devient bleu car il contient la chaîne "test" au début. Le deuxième élément div contient "test" dans le nom de la classe, mais il se trouve à la fin du nom de la classe et n'est donc pas sélectionné par le sélecteur de caractère générique de début (^=).
<html>
<head>
<style>
[class^="test"] {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h2 id="Using-the-i-starts-with-i-wildcard-CSS-selector-in-CSS"> Using the <i> starts with (^=) </i> wildcard CSS selector in CSS </h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "testdemo"> This is a text with the class name testdemo test. </div>
<div class = "element"> This is a text with the class name element. </div>
</body>
</html>
CSS se termine par un sélecteur de caractère générique ($=)
Un sélecteur générique se terminant par ($=) sélectionne tous les éléments HTML si une valeur d'attribut spécifique contient une sous-chaîne à la fin. Par exemple, si les noms de classe de deux éléments différents sont "onestart" et "lastone" et que la sous-chaîne est "one", il sélectionnera un élément HTML avec uniquement le nom de classe "lastone" car il contient la première fin de la sous-chaîne. .
Grammaire
Les utilisateurs peuvent utiliser des sélecteurs CSS génériques se terminant par ($=) sur les classes selon la syntaxe suivante.
[class$="string"] {
}
La syntaxe ci-dessus sélectionne tous les éléments HTML dont le nom de classe se termine par la sous-chaîne "string".
Exemple
Dans l'exemple ci-dessous, les deuxième nd et quatrième éléments div contiennent la sous-chaîne "test" à la fin de la valeur du nom de classe. Nous utilisons un sélecteur CSS avec un caractère générique ($=) à la fin pour sélectionner deux éléments div et leur appliquer des bordures, des marges et un remplissage.
<html>
<head>
<style>
[class$="test"] {
border: 2px solid pink;
padding: 5px 10px;
margin: 5px;
}
</style>
</head>
<body>
<h2 id="Using-the-i-ends-with-i-wildcard-CSS-selector-in-CSS"> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "testdemo"> This is a text with the class name testdemo test. </div>
<div class = "elementtest"> This is a text with the class name elementtest. </div>
</body>
</html>
Exemple
Dans l'exemple ci-dessous, nous utilisons des sélecteurs CSS se terminant par id au lieu d'utiliser des classes comme attributs. Il montre comment sélectionner des éléments HTML à l'aide d'autres propriétés et de sélecteurs CSS génériques.
Ici, nous sélectionnons tous les éléments HTML dont la valeur id contient « nom » à la fin et modifions le style et la couleur de la police.
<html>
<head>
<style>
[id$="name"] {
color: lightskyblue;
font-style: italic;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2 id="Using-the-i-ends-with-i-wildcard-CSS-selector-in-CSS"> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2>
<div id = "firstname"> id == firstname </div>
<div id = "lastname"> id == lastname </div>
<div id = "age"> id == age </div>
<div id = "namestart"> id == namestart </div>
</body>
</html>
L'utilisateur a appris à utiliser les sélecteurs CSS génériques avec les classes. Les utilisateurs peuvent utiliser le sélecteur CSS contain (*=) pour obtenir des éléments dont la valeur d'attribut contient une sous-chaîne au milieu, et utiliser le sélecteur CSS (^=) pour obtenir des éléments dont la valeur d'attribut contient une sous-chaîne au début et se termine par ($ ). =) La fin.
De plus, les utilisateurs ont appris à utiliser les sélecteurs CSS génériques avec d'autres propriétés, telles que l'identifiant dans l'exemple précédent.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur?
Apr 02, 2025 pm 06:17 PM
J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Comparaison des navigateurs pour une conception réactive
Apr 02, 2025 pm 06:25 PM
Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire
Cartes empilées avec un positionnement collant et une pincée de sass
Apr 03, 2025 am 10:30 AM
L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.
