Sélecteur de cartes génériques CSS
Sélecteurs génériques
- Le [attribut * = «valeur»] est un sélecteur générique qui est utilisé pour trouver des éléments dont la valeur d'attribut comprend la chaîne que nous avons donnée ici comme valeur.
- Le [attribut = ”valeur”] est un sélecteur générique qui est utilisé pour trouver des éléments dont la valeur d'attribut commence par la chaîne que nous avons donnée ici comme valeur.
- Le [attribut $ = ”valeur”] Le sélecteur est un sélecteur générique qui est utilisé pour trouver des éléments dont la valeur d'attribut se termine par la chaîne que nous avons donnée ici comme valeur.
Exemple 1
Nous commençons notre code et effectuons ces codes dans Visual Studio Code. Tout d'abord, nous ouvrons un nouveau fichier. Ensuite, nous choisissons HTML comme langue, puis nous mettons «!"Et appuyez sur" Entrée ". Toutes les balises de base HTML apparaissent ici. Donc, nous n'avons pas besoin d'ajouter toutes ces balises manuellement. Nous venons de mettre la balise «lien» dans la «tête» dans laquelle nous mettons le nom du fichier CSS. À l'intérieur du corps, nous mettons une rubrique et certains conteneurs Div, et quelques paragraphes. Tous les divs et paragraphes contiennent différents noms de classe, nous utiliserons donc ces noms comme valeur dans le sélecteur de joker pour sélectionner les éléments dans CSS. Ensuite, nous appliquerons un style différent aux éléments sélectionnés.
Nous mettons la syntaxe du sélecteur générique [classe * = «str»] qui sélectionnera tous les éléments dont le nom de classe contient «Str». Nous passons «Str» comme valeur de ce sélecteur de joker. Nous allons appliquer certaines propriétés afin que vous remarquerez facilement comment il sélectionne les éléments et applique le style à tous. Nous définissons «noir» comme «fond» pour tous les éléments qui contiennent «Str» dans leurs noms de classe.
Nous définissons le texte «couleur» sur «blanc» parce que nous avons utilisé le noir pour l'arrière-plan. Nous modifions également la taille du texte en utilisant la propriété «taille de police» et en la définissant sur «18px». Nous alignons également le texte des éléments sélectionnés sur la propriété «Centre» en utilisant la propriété «Font-Family» et la définissons sur la police «Arial». Le poids de la police des éléments sélectionnés est réglé sur «Bold». Nous fournissons également la sortie des codes dans ce tutoriel. Voir la sortie et vérifier comment il sélectionne les éléments et applique toutes ces propriétés aux éléments sélectionnés.
La sortie montre qu'il sélectionne tous les éléments dont les noms de classe contiennent «STR» et les propriétés que nous avons utilisées dans le code CSS sont toutes appliquées aux éléments sélectionnés.
Exemple 2
Nous avons à nouveau plusieurs classes DIV et plusieurs paragraphes avec différents noms de classe et une rubrique au début. Nous appliquerons le sélecteur de joker dans CSS et sélectionnerons les éléments de ce fichier HTML et modifierons le style de ces éléments sélectionnés.
Nous utilisons la deuxième syntaxe du joker dans cet exemple qui est [classe $ = «str»]. Il sélectionnera tous ces éléments dont les noms de classe se terminent par la chaîne «Str». Nous appliquons également les propriétés de style données que nous utilisons sur les éléments sélectionnés. Nous décorons le texte sélectionné à l'aide de la propriété «Text-Décorcoré» et mettons «souligner» pour cette propriété. Nous avons changé la «couleur» du texte en «marron». Nous utilisons également la propriété «taille de police» et placons «22px» comme valeur pour modifier la taille du texte. Nous utilisons également l'attribut «Font-Family» pour définir la police sur «Times New Roman» et le «poids de police» de l'élément sélectionné a été défini sur «Bold."
Ici, vous pouvez voir toutes ces classes dont les noms se terminent avec la chaîne «STR» sont sélectionnées et modifiées. Toutes les propriétés que nous avons décrites dans le CSS sont appliquées ici sur les éléments dont les noms de classe se terminent à «STR». Tout cela est dû à l'utilisation du sélecteur de joker.
Exemple 3
Ce fichier HTML est le même que ci-dessus. Nous changeons simplement les noms des classes de div et de paragraphe. Nous utiliserons la troisième syntaxe du sélecteur de cartes génériques dans CSS pour ce code.
Dans cet exemple, nous allons utiliser la troisième syntaxe du joker qui est [classe ^ = «Str»] et il sélectionnera tous ces éléments dont le nom de classe commence par la chaîne «Str». Pour tous les articles avec «Str» au début des noms de classe, nous définissons «Pink» comme «Background». Nous avons changé la «couleur» du texte en «rouge». Nous utilisons la propriété «taille de police» et le spécifions sur «22px» pour modifier la taille du texte. Nous utilisons également l'attribut «Font-Family» pour définir le type de police à «Calibri» et déplacer le texte des éléments sélectionnés vers le «Centre». Le style de police des éléments spécifiques a été mis ici à «italique».
Dans cette capture d'écran, tous ces éléments sont stylés dont le nom de classe commence par la chaîne «STR». Le sélecteur de joker sélectionne tous ces éléments et leur applique toutes les propriétés. Vous pouvez également le voir dans la sortie.
Exemple 4
Nous allons changer un peu le code HTML précédent. Nous ajoutons plus de conteneurs DIV et ajoutons plus de paragraphes dans le fichier HTML précédent et appliquerons les trois sélecteurs génériques dans le code CSS de cet exemple.
Dans ce code, nous appliquons d'abord un peu de style à l'en-tête et modifions la «famille de police» à «Algérien». Nous avons également réglé la rubrique dans le «centre» en utilisant la propriété «Text-Align». La propriété «text-decoration» est ici que nous avons réglée comme «soulignement», donc elle tracera le soulignement pour la rubrique. La «couleur» est définie comme «marron».
Ensuite, nous utilisons le sélecteur générique dans lequel nous avons placé «*» et «str» comme valeur. Ainsi, il sélectionnera toutes les classes qui contiennent «Str» dans le nom de leur classe de leur classe. Nous utilisons également certaines propriétés qui s'appliqueront aux éléments sélectionnés. Après avoir établi les propriétés de style pour ce sélecteur de joker, nous nous dirigeons vers le prochain sélecteur de joker qui est «[classe ^ =« PAR »]», il sélectionnera tous les éléments dans lesquels les noms de classe commencent par la chaîne «PAR» et s'appliquera Ces propriétés données sur ces éléments.
Maintenant, nous utilisons le dernier sélecteur de joker ici que nous écrivons comme «[classe $ =« div »]». Ainsi, il sélectionnera les éléments dont le nom de classe se termine à la chaîne «div» et appliquera également les propriétés données sur tous. Tous ces sélecteurs génériques ignorent les éléments qui ne remplissent pas l'état de ces sélecteurs de joker.
Regardez cette sortie, les éléments qui contiennent «Str» dans les noms de classe sont stylés de la même manière, les éléments dont le nom de classe commence par «par» sont stylés de la même manière, et les éléments dont le nom de classe contient «div» à la fin de Le nom de classe est le même. Et les éléments qui ne contiennent pas «Str» dans le nom de classe et leurs noms de classe ne commencent pas par «par» et ne terminent pas à la chaîne «div» n'est pas sélectionné et semblent simple ici. Aucune propriété ne leur est appliquée.
Conclusion
L'objectif d'écrire ce didacticiel est de vous guider sur les sélecteurs de joker CSS. Nous avons exploré les sélecteurs Wildcard CSS et vous avons expliqué ce que sont les sélecteurs génériques, comment utiliser ces sélecteurs génériques et comment ils fonctionnent. Nous avons discuté que les sélecteurs génériques sont utilisés pour choisir plusieurs éléments en même temps et utilisés pour appliquer des propriétés de style aux éléments que nous avons choisis en utilisant ces sélecteurs de joker. Nous avons également montré des exemples dans lesquels nous avons utilisé ces sélecteurs génériques et avons fourni les sorties de tous les exemples de ce tutoriel.