Y a-t-il un sélecteur CSS pour les éléments contenant un certain texte?

Les sélecteurs CSS sélectionnent les éléments HTML pour appliquer les propriétés de style. Ceux-ci sont utilisés pour trouver les éléments que vous souhaitez styliser. Il existe certaines catégories de sélecteurs CSS, tels que la pseudo-classe, les sélecteurs simples et autres. Plus précisément, le sélecteur d'attribut est la meilleure option pour sélectionner l'élément ayant un texte précis. Le sélecteur de combinateur peut également être appliqué à cet effet.

Cet article démontrera les méthodes suivantes:

• Méthode 1: Sélection de l'élément contenant certains texte à l'aide du sélecteur d'attribut CSS
• Méthode 2: Sélection de l'élément contenant un certain texte à l'aide du sélecteur de frères et sœurs CSS

Méthode 1: Sélection de l'élément contenant certains texte à l'aide du sélecteur d'attribut CSS

Le sélecteur d'attribut CSS «Sélecteur CSS [attribut ~ = "Value"]«Peut aider à sélectionner l'élément avec un texte définitif.

Syntaxe

Comprenons la syntaxe du sélecteur d'attribut CSS:

[attribut-nom ~ = valeur]

// Déclaration de CSS

Ici:

• "Nom d'attribut»: L'attribut utilisé dans l'élément HTML ayant un certain texte est spécifié ici.
• "~»: Ce symbole est un combinateur général de frère. Il est utilisé pour choisir chaque élément qui est le prochain élément de l'élément donné.
• "valeur»: Il indique la valeur d'attribut.

Exemple

Dans le fichier HTML, suivez les instructions répertoriées:

• Tout d'abord, ajoutez le ""Element et affectez une classe"articles-div".
• Ajouter le "

  ","

  ", et "

  »Éléments au sein du div.

• Le "

  " et "

  »Ajustez les en-têtes de la page. Le "

  «La tête est légèrement plus petite que le«

  " élément.

• Le "

  »L'élément spécifie le contenu texte sur la page:

Linuxhint

Choses stationnaires

livre

crayon

bloc-notes

livre

Style le div "articles-div"Et le titre"

»En appliquant les propriétés CSS comme mentionné ci-dessous. Après cela, nous verrons comment sélectionner le «

»Texte de l'élément à l'aide des sélecteurs d'attribut CSS.

Classe de style «articles-div»

Les propriétés CSS suivantes sont appliquées au «articles-div" classe:

.éléments-div
Texte-aligne: Centre;
taille de police: 17px;
Font-Family: «Trebuchet MS»;

Ici:

• "alignement de texte»Détermine l'alignement du texte.
• "taille de police”Ajuste la taille de la police d'élément.
• "famille de polices”Choisit le style de police de l'élément.

Élément de style «H2»

"h2"Est également connu comme le sélecteur d'éléments. Il est utilisé pour styliser le «

»Élément avec les propriétés suivantes:

H2
taille de police: 30px;
Espacement des lettres: 0.2EM;
Couleur: RVB (182, 14, 238);

Dans le bloc de code ci-dessus:

• "l'espacement des lettres"Ajuste l'espacement entre les caractères de l'élément.
• "couleur»Attribue la couleur au texte.
• "taille de police»La propriété est définie dans la section ci-dessus.

Sélectionnez le texte «Livre»

Pour sélectionner un texte particulier dans le document, il n'y a pas de sélecteur spécifique. L'attribut de l'élément doit seulement être spécifié. Ensuite, avec l'aide de la valeur d'attribut, nous pouvons sélectionner le texte dans CSS:

[stationnaire ~ = «livre»]
Color en arrière-plan: Cornflowerblue;

Ici, en CSS, le «Couleur de l'arrière plan"La propriété est ajustée au texte en spécifiant l'attribut"Stationnaire"Avoir de la valeur"livre".

La sortie ci-dessous montre que tous les éléments ayant la valeur d'attribut "livre«Sont stylisés:

Maintenant, vérifions l'exemple pour appliquer des styles au «crayon" texte. À cette fin, l'attribut stationnaire avec la valeur "crayon”Est ​​récupéré dans CSS via le sélecteur d'attribut:

[stationnaire ~ = crayon]
Color en arrière-plan: RVB (240, 168, 234);
rembourrage: 5px;

Ici:

• "Couleur de l'arrière plan»Spécifié la couleur de l'arrière-plan de l'élément.
• "rembourrage»Attribue un espace autour du contenu de l'élément.

Sortir

Méthode 2: Sélection de l'élément contenant un certain texte à l'aide du sélecteur de frères et sœurs CSS

Il existe une autre méthode pour appliquer des styles sur les éléments ayant du texte. Mais cette méthode doit être utilisée lorsque vous avez plusieurs "

«Éléments ayant du texte, et vous devez tous les styliser en même temps. Pour ce faire, spécifiez l'élément qui est juste avant le «

”Éléments, puis ajoutez le symbole du combinateur général de frères et sœurs (~) et mentionnez l'élément ayant du texte pour appliquer des styles.

Syntaxe

Voici la syntaxe du scénario susmentionné:

ÉLÉMENT DE PREMIÈME-SESHENCENCE ~ Seconde séquence-Element
Déclarations CSS

Exemple

Ajoutons le style à tous " H4 ~ P
Couleur: Crimson;
Police-poids: Bold;

Le "H4 ~ P»Signifie le«

«Éléments qui sont des frères et sœurs directs du«

" élément. Les propriétés décrites suivantes y sont ajoutées:

• Le "poids de police»La propriété désigne l'épaisseur de la police de l'élément.
• Le "couleur»La propriété répare la couleur de la police.

Sortir

En utilisant ces manières, vous pouvez sélectionner des éléments ayant un certain texte à cuire dans CSS.

Conclusion

Pour sélectionner les éléments contenant un certain texte, le CSS "sélecteurs d'attribut" et "sélecteur de combinateur de frères et sœurs" peut être utilisé. Les sélecteurs d'attribut spécifient le nom d'attribut de l'élément et sa valeur. Ensuite, déclarez les propriétés CSS. Le sélecteur de combinateur de frères et sœurs généraux sélectionne chaque élément suivi par le sélecteur précédent. Cet article a démontré les moyens de sélectionner des éléments de CSS ayant un certain texte.