Si vous cherchez à appliquer des règles de style à votre site Web, alors les sélecteurs sont la ressource indiquée. Il existe plusieurs types de sélecteurs, dont certains sont plus populaires. Pour ça aujourd'hui Nous vous montrons ce que sont les sélecteurs d'attributs en CSS, afin que vous puissiez tirer le meilleur parti de ces outils.
En utilisant CSS, vous pouvez utiliser plusieurs options qui vous aideront grandement dans la présentation de votre site Web. Sélecteurs d'attributs Ils serviront à délimiter les éléments et faciliteront le travail de personnalisation. Bien que ce sujet puisse être compliqué pour les personnes qui n’y sont pas liées, le découvrir peut vous ouvrir de nombreuses portes.
Que signifie CSS ?
Si vous êtes lié au monde de la conception Web, vous aurez fréquemment entendu ce terme. Feuilles de style en cascade (CSS) est un langage de programmation qui vous permet de créer et de modifier rapidement et facilement un document HTML. Cela signifie qu'il s'agit d'un langage avec lequel vous pouvez gérer le design, apporter des modifications, des présentations, des améliorations et également personnaliser les pages Web. Son nom vient du fait qu’il permet de calculer des propriétés héritées d’une autre sur plusieurs feuilles. Dans la conception Web, cela s’appelle une cascade.
Que sont les sélecteurs d’attributs en CSS ?
Sélecteurs CSS Ce sont les outils que vous utilisez pour définir le style que vous souhaitez donner à vos éléments CSS. Il existe de nombreux types de sélecteurs dans ce langage, chacun avec sa propre syntaxe et son propre utilitaire. L'utilisation des règles de programmation correctes aide le navigateur à appliquer certaines propriétés aux éléments spécifiés.
Pour sa part, Les sélecteurs d'attributs sont l'un des types de sélecteurs que nous avons en CSS. Ils sont très utiles, bien que parfois moins connus que d'autres sélecteurs plus courants tels que les sélecteurs de classe ou de balise. Les sélecteurs CSS sont utilisés pour spécifiez les champs auxquels nous souhaitons appliquer les styles.
En CSS, les sélecteurs servent à délimiter les éléments HTML de notre page Web auxquels nous souhaitons appliquer un style. CSS dispose de nombreux sélecteurs qui permettent de sélectionner des éléments avec une grande précision lors de l'application de styles. Ces soi-disant sélecteurs d'attributs garantissent que vous sélectionnez les éléments HTML en fonction de leurs attributs et/ou valeurs.
Quels sont les types de sélecteurs d’attributs ?
[Nom d'attribut] sélectionne les éléments dont l'attribut nommé nom_attribut est défini, quelle que soit sa valeur.
[attribut_name=valeur] sélectionne les éléments dont l'attribut nommé nom_attribut est défini sur une valeur égale à value.
[nom_attribut~=valeur] sélectionne les éléments qui ont un attribut appelé nom_attribut défini et au moins une des valeurs d'attribut est valeur.
[nom_attribut|=valeur], sélectionne les éléments qui ont un attribut appelé nom_attribut défini.
[nom_attribut$=valeur] Sélectionnez les balises dont l'attribut se termine par cette valeur.
[nom_attribut^=valeur] Sélectionne les balises dont l'attribut commence par cette valeur.
Comment relier les lettres majuscules et minuscules ?
Si vous souhaitez relier les valeurs des attributs Insensible à la casse, vous pouvez utiliser la valeur « i » avant le crochet fermant. Cet indicateur indique au navigateur de faire correspondre tous les caractères ASCII, qu'ils soient en majuscules ou en minuscules. Sans cet indicateur, les valeurs sont concaténées conformément aux directives linguistiques sensibles à la casse du document. HTML est sensible à la casse.
Que sont les opérateurs de sélection d'attributs ?
On peut utiliser quelques opérateurs pour les sélecteurs d'attributs qui sont moins connus, et qui permettent d'affiner considérablement l'apparence de certaines valeurs dans les attributs consultés.
Ce sont les opérateurs disponibles dans les sélecteurs d'attributs
*= (contenant) : L'opérateur * vous permet de sélectionner au moins une fois des éléments qui ont une chaîne spécifique comme valeur d'un attribut.
^= (se produit au début de la valeur de l'attribut): Choisissez les éléments qui ont un attribut dont la valeur commence par une chaîne spécifique.
$= (se produit à la fin de la valeur de l'attribut) : Sélectionne les éléments qui ont un attribut dont la valeur se termine par une chaîne spécifique.
~= (contient un mot exact ou séparé par des espaces): choisit les éléments dont la valeur d'attribut a un contenu qui correspond exactement à une chaîne spécifiée ou contient un mot séparé par des espaces avec une chaîne spécifiée.
|= (contient le mot exact ou est séparé par des tirets): Similaire à ci-dessus, mais le mot peut être séparé par des traits d'union au lieu d'espaces.
Comment utiliser les sélecteurs en CSS ?
Il existe deux manières possibles d'utiliser les sélecteurs en CSS. Si vous avez du code HTML et du code CSS dans le même document, Tout ce que vous avez à faire est d'ajouter un sélecteur CSS dans l'en-tête de votre site.
En revanche, si vos HTML et CSS sont dans des documents distincts, vous pouvez avoir un document appelé index.html et un autre document appelé style.css. Le fichier index.html doit inclure une ligne de code qui appelle le fichier CSS, afin que les styles s'affichent correctement sur votre site Web.
Quels autres types de sélecteurs trouvons-nous en CSS ?
Il existe différents groupes de sélecteurs. Soyez conscient du type de sélecteur dont vous avez besoin vous aidera à utiliser l'outil idéal pour votre projet. C'est pourquoi nous vous en montrons quelques-uns ci-dessous :
Sélecteurs de type, de classe et d'identifiant
Ce groupe comprend des sélecteurs qui restreignent un élément HTML, comme un fichier. Il contient également des sélecteurs qui restreignent une classe ou un identifiant.
Pseudoclasses et pseudoéléments
Ce groupe de sélecteurs comprend des pseudoclasses, qui Ils formatent des états spécifiques d'un élément. Par exemple, la pseudo-classe hover sélectionne un élément uniquement lorsque la souris le survole. Inclut également des pseudo-éléments qui sélectionnent une partie spécifique d'un élément plutôt que l'élément lui-même
Combineurs
Grâce à cette série de sélecteurs d'autres sélecteurs sont combinés, dans le but de séparer les différents éléments de nos documents.
sélecteur universel
Automatiquement l'astérisque (*) qui est le symbole du sélecteur universel, choisit tous les éléments d'un certain document.
Sélecteur d'identifiant
Ce type a été réalisé dans le but de sélectionner des éléments basés sur l'attribut ID.
Si vous cherchez à contrôler tout ce qui se passe sur un site Web, certainement la meilleure façon de l'obtenir est de créer votre propre conception. Pour eux, vous pouvez utiliser des outils tels que des sélecteurs d'attributs. Alors Si vous vous demandez ce que sont les sélecteurs d'attributs en CSS, Dans cet article, nous espérons vous avoir apporté les réponses. Si vous pensez que nous avons oublié quelque chose d'important, faites-le-nous savoir dans les commentaires.
