Sélecteurs d'attributs CSS

Les sélecteurs d'attribut définissent des styles pour les éléments HTML portant un attribut spécifique. Ils peuvent définir des styles pour les éléments HTML possédant un attribut spécifique, et non pas seulement pour les attributs class et id.

Comprendre les sélecteurs d'attribut

Les sélecteurs d'attribut CSS fournissent une méthode simple et puissante pour appliquer des styles aux éléments HTML spécifiques.Attribut ou valeur d'attributl'existence applique les règles de style aux éléments HTML.

Vous pouvez créer un sélecteur d'attribut en plaçant l'attribut (optionnellement avec une valeur) entre deux crochets. Vous pouvez également le placer avant unSélecteur de type d'élément.

Les sections suivantes décrivent les sélecteurs d'attribut les plus courants.

Sélecteur [attribute] CSS

C'est la forme la plus simple du sélecteur d'attribut, si l'attribut donné existe, applique les règles de style à l'élément. Par exemple, nous pouvons utiliser les règles de style suivantes pour styliser tous les éléments ayant un attribut :

[title] {}}
　　　　color: blue;
}

[title] Le sélecteur dans l'exemple précédent correspond à tous les éléments ayant une propriété title.

Vous pouvez également limiter la portée de sélection en plaçant l'attribut sélecteur après le sélecteur de type d'élément, comme suit :

abbr[title] {
　　　　color: red;
}

Le sélecteur abbr[title] ne correspond qu'àLes éléments ayant une propriété title, donc il correspond aux abréviations, mais ne correspond pas aux éléments ayant une propriétéancreélément title.

sélecteur CSS [attribute="value"]

Vous pouvez utiliser l'opérateur = pour faire correspondre l'attribut sélecteur avec les éléments qui ont une valeur de propriété égale à la valeur donnée :

input[type="submit"]　{
　　　　border:　1px solid green;
}

Le sélecteur dans l'exemple précédent correspond à input Tous les éléments ayant une valeur de propriété type égale à submit.

sélecteur CSS [attribute〜="value"]

Vous pouvez utiliser l'opérateur ~= pour faire correspondre l'attribut sélecteur avec les valeurs de propriété qui sontséparés par des espacesTous les éléments de la liste des valeurs correspondants, l'un des valeurs étant égal à la valeur spécifiée :

[class~="warning"] {
　　　　color:　#fff;
　　　　background:　rouge;
}

Tous les éléments ayant une propriété class contenant des valeurs séparées par des espaces, l'une des valeurs étant warning. Par exemple, les éléments ayant des valeurs de classe correspondantes warning, alert warning, etc.

sélecteur CSS [attribute |="value"]

Vous pouvez utiliser l'opérateur |= pour faire correspondre l'attribut sélecteur avec les attributs qui commencent par une valeur spécifiéeséparés par des tiretsTous les éléments de la liste de valeurs correspondants :

[lang|=en] {
　　　　color:　#fff;
　　　　background: blue;
}

Le sélecteur dans l'exemple précédent correspond à ceux qui ontlangTous les éléments ayant un attribut de propriété contenant une valeur commençant par en, que cette valeur soit suivie d'un tiret et d'autres caractères. Autrement dit, ses éléments correspondent aux éléments qui ont une valeur de propriété lang égale à en, en-US, en-GB, etc., et ne peut pas être US-en, GB-en.

sélecteur CSS [attribute ^="value"]

Vous pouvez utiliser l'opérateur ^= pour faire correspondre l'attribut sélecteur avec la valeur de l'attributparvaleur spécifiéecommençant parTous les éléments correspondants. Il n'est pas nécessaire qu'il s'agisse d'un mot complet.

a[href^="http://"] {
　　　　background: url("external.png")　100%　50%　no-répéter;
　　　　padding-right:　15px;
}

Le sélecteur dans l'exemple précédent cible tous les liens externes et ajoute une petite icône indiquant qu'ils s'ouvriront dans un nouvel onglet ou une nouvelle fenêtre.

Sélecteur CSS [attribute $="value"]

De même, vous pouvez utiliser l'opérateur $= pour sélectionner les valeurs d'attributparvaleur spécifiéeterminantTous les éléments. Il n'a pas besoin d'être un mot complet.

a[href$=".pdf"]　{
　　　　background:　url("pdf.png")　0　50%　no-répéter;
　　　　padding-left:　20px;
}

Dans cet exemple, le sélecteur sélectionneLes éléments qui lient à des documents PDF, et ajoutent une petite icône PDF, pour fournir aux utilisateurs des informations sur les liens.

CSS [attribute *="value"] sélecteur

Vous pouvez utiliser*L'opérateur = permet aux sélecteurs d'attribut de correspondre à tous les éléments dont la valeur de l'attribut contient la valeur spécifiée.

[class*="warning"]　{
　　　　color:　#fff;
　　　　background:　rouge;
}

Dans cet exemple, ce sélecteur correspond à tous les éléments HTML avec une classe contenant warning. Par exemple, ses éléments correspondants ont une valeur de classe warning, alert warning, alert-warning ou alert_warning, etc.

Utiliser les sélecteurs d'attribut pour styliser les formulaires

Les sélecteurs d'attribut pour les éléments sansclassou les styles spéciaux sont particulièrement utilesid：

input[type="text"],　input[type="password"]　{
　　　　width:　150px;
　　　　display:　block;
　　　　marge-bottom:　10px;
　　　　background:　jaune;
}
input[type="submit"]　{
　　　　padding:　2px　10px;
　　　　border:　1px　solide　#804040;
　　　　background:　#ff8040;
}