Sélecteurs d'attribut CSS
- [attribut] sélecteur
- [attribut = «valeur»] sélecteur
- [attribut ~ = «valeur»] sélecteur
- [attribut | = «valeur»] sélecteur
- [attribut ^ = «valeur»] sélecteur
- [attribut $ = «valeur»] sélecteur
- [attribut * = «valeur»] sélecteur
Chacun d'eux est expliqué en détail ci-dessous.
[attribut] sélecteur
Aux fins des éléments de style qui ont un attribut particulier, le sélecteur [d'attribut] est utilisé.
Syntaxe
élément [attribut]valeur de la propriété;
Ou,
[attribut]valeur de la propriété;
Exemple
Disons que vous voulez styliser tous les éléments ayant un attribut alt, Ensuite, utilisez le sélecteur [Attribut] de la manière suivante.
Html
C'est un titre
C'est un paragraphe.
Dans le code ci-dessus, nous avons créé deux éléments
et
. Le
ont reçu une classe d'attribut, tandis que le
L'élément a reçu un attribut alt.
CSS
[alt]Style de police: italique;
Maintenant, en utilisant le sélecteur [Attribut], nous ne stylisons que les éléments avec l'attribut alt. Dans ce cas, puisque seulement le
L'élément a l'attribut alt, par conséquent, la règle de style ne sera appliquée que sur le paragraphe.
Sortir
Des éléments avec un attribut Alt ont été stylisés.
[attribut = «valeur»] sélecteur
Atttibutes a donc une certaine valeur, afin de coiffer un élément ayant un certain attribut et une certaine valeur, nous utilisons le sélecteur [attribut = "Value"].
Syntaxe
élément [attribut = "value"]valeur de la propriété;
Ou,
[attribut = "value"]valeur de la propriété;
Exemple
Supposons que vous souhaitiez styliser certains éléments ayant un attribut et une valeur particuliers. Suivez l'exemple ci-dessous.
Html
Ici, nous avons créé un champ de saisie, ainsi qu'un bouton. Les deux éléments ont un attribut de la classe de noms, cependant, les valeurs des deux attributs de classe sont différentes.
CSS
[class = "input"]Color en arrière-plan: rose;
taille de police: 20px;
[class = "btn"]
rembourrage: 3px;
Border: 1px noir solide;
Dans le code ci-dessus, nous utilisons le sélecteur [attribut = «valeur»] pour styliser à la fois le champ de saisie ainsi que le bouton.
Sortir
Les deux éléments ont été du style avec succès.
[attribut ~ = «valeur»] sélecteur
Il y a certains attributs qui ont une liste de valeurs séparées par l'espace, par exemple, classe = «Hello World». Maintenant, pour styliser des éléments avec de telles valeurs d'attribut, le sélecteur [Attribut ~ = "Value"] est utilisé. Il styles des éléments dont la valeur d'attribut correspond à l'une de ces valeurs.
Syntaxe
élément [attribut ~ = "valeur"]valeur de la propriété;
Ou,
[attribut ~ = "valeur"]valeur de la propriété;
Exemple
L'exemple ci-dessous démontre le fonctionnement du sélecteur en discussion.
Html
C'est un titre
C'est un paragraphe.
C'est un autre paragraphe.
Dans le code ci-dessus, nous avons défini trois éléments. Chacun de ces éléments a le même attribut, cependant, des valeurs différentes.
CSS
[classe ~ = "tête"]couleur violet;
[classe ~ = "para"]
taille de police: 20px;
Style de police: italique;
En utilisant le sélecteur [Attribut ~ = "Value"], nous stylisons l'en-tête et les paragraphes. Comme vous pouvez le voir que la valeur d'attribut de chacun
L'élément est une liste de valeurs séparées par l'espace, cependant, le mot-clé «para» existe dans les deux valeurs, par conséquent, les règles de style définies pour la valeur d'attribut «para» seront appliquées aux deux paragraphes.
Sortir
Le sélecteur [Attribut ~ = "Value"] fonctionne correctement.
[attribut | = «valeur»] sélecteur
Aux fins des éléments de style avec des attributs ayant des valeurs séparées par trait d'union, le sélecteur [Attribut | = "Value"] est utilisé.
Syntaxe
élément [attribut | = "valeur"]valeur de la propriété;
Ou,
[attribut | = "valeur"]valeur de la propriété;
Exemple
Suivez l'exemple mentionné ci-dessous pour comprendre le fonctionnement du sélecteur [attribut | = «valeur»].
Html
C'est un titre
C'est un paragraphe.
C'est un autre paragraphe.
Le
Et le premier
L'élément a une valeur d'attribut séparée par trait d'union, cependant, la valeur d'attribut du dernier
L'élément n'est pas séparé par un trait d'union.
CSS
[classe | = "Linux"]Color d'arrière-plan: bisque;
Style de police: italique;
Maintenant, ce sélecteur n'appliquera que des règles de style à l'en-tête et au premier paragraphe car seuls ces deux éléments ont une valeur d'attribut qui est séparée par un trait d'union.
Sortir
Les règles de style ont été appliquées à
Et le premier
élément.
[attribut ^ = «valeur»] sélecteur
Afin de styliser des éléments avec des attributs ayant une valeur de départ spécifique, le sélecteur [attribut ^ = «valeur»]. La valeur n'est pas nécessairement tout le mot.
Syntaxe
élément [attribut ^ = "valeur"]valeur de la propriété;
Ou,
[attribut ^ = "valeur"]valeur de la propriété;
Exemple
Nous allons utiliser le même exemple utilisé dans la section ci-dessus pour effacer le concept du sélecteur [Attribut ^ = "Value"].
Html
C'est un titre
C'est un paragraphe.
C'est un autre paragraphe.
Notez que chacun des éléments ci-dessus a une valeur d'attribut commençant par le mot Linux.
CSS
[classe ^ = "Linux"]Color d'arrière-plan: bisque;
Style de police: italique;
Maintenant, ce sélecteur cèdera tous les éléments car chacun d'eux a la même valeur d'attribut de départ.
Sortir
Le sélecteur [attribut ^ = «valeur»] fonctionne correctement.
[attribut $ = «valeur»] sélecteur
Afin de styliser des éléments avec des attributs ayant une valeur de fin particulière, le sélecteur [attribut $ = «valeur»]. La valeur n'est pas nécessairement tout le mot.
Syntaxe
élément [attribut $ = "valeur"]valeur de la propriété;
Ou,
[attribut $ = "valeur"]valeur de la propriété;
Exemple
Suivez l'exemple ci-dessous pour comprendre le fonctionnement de ce sélecteur d'attribut.
Html
Du texte.Du texte.
Du texte.
Ici, nous avons créé trois éléments div. Les deux premiers éléments div ont reçu une valeur d'attribut se terminant par le mot-clé «div».
CSS
[class $ = "div"]Color en arrière-plan: beige;
rembourrage: 10px;
taille de police: 20px;
Style de police: italique;
Le [attribut $ = «valeur»] appliquera les règles de style ci-dessus aux deux premiers éléments div uniquement.
Sortir
Les deux premiers éléments div ont été appelés à l'aide du sélecteur [attribut $ = «valeur].
[attribut * = «valeur»] sélecteur
Afin de styliser tous les éléments avec des valeurs d'attribut ayant un mot-clé spécifique, le sélecteur [attribut * = "valeur"] est utilisé.
Syntaxe
élément [attribut * = "valeur"]valeur de la propriété;
Ou,
[attribut * = "valeur"]valeur de la propriété;
Exemple
Supposons que vous souhaitiez styliser certains éléments en utilisant le sélecteur [Attribut * = "Value"]. Suivez le code ci-dessous.
Html
C'est un paragraphe.
C'est un autre paragraphe.
Nous en avons créé deux
Éléments ayant des valeurs d'attribut «para1» et «para2» respectivement.
CSS
[classe * = "ar"]Color d'arrière-plan: bisque;
Style de police: italique;
Ce sélecteur d'attribut détectera toute valeur d'attribut avec le mot-clé «AR» et appliquera les règles de style ci-dessus sur cet élément.
Sortir
Le sélecteur [attribut * = «valeur»] fonctionne correctement.
Conclusion
Vous pouvez styliser des éléments HTML qui ont certains attributs ou valeurs d'attribut. Il y a un total de sept sélecteurs d'attribut CSS qui sont: [attribut] sélecteur, [attribut = "valeur"], [attribut ~ = "valeur"] sélecteur, [attribut | = "valeur"] sélecteur, [attribut ^ = " Sélecteur de valeur "], [attribut $ =" valeur] sélecteur et [attribut * = "valeur"] sélecteur. Tous ces sélecteurs servent un objectif différent dont nous avons discuté en détail dans ce post ainsi que des exemples pertinents.