Tutoriel CSS - Sélecteurs CSS adjacents. Sélecteurs adjacents Quelles balises sont adjacentes dans ce code ?

3. Une valeur d'attribut parmi plusieurs

Certaines valeurs d'attribut peuvent être séparées par des espaces, comme les noms de classe. Pour définir une règle de style lorsque la valeur requise est présente dans la liste des valeurs d'attribut, utilisez le sélecteur suivant :

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

Le style est appliqué si l'attribut a la valeur requise ou fait partie d'une liste de valeurs séparées par des espaces. Par exemple:

{
couleur : rouge ;
taille de police : 150 % ;
}
...

Notre téléphone : 777-77-77

Notre adresse : Rue de Moscou. Sovetskaïa 5

Vous obtiendrez le résultat suivant :

La règle s'applique à un élément dont les valeurs d'attribut incluent : classe il y a un sens tél..

4. Trait d'union dans la valeur de l'attribut

Un trait d’union est autorisé dans les valeurs d’identifiant et de classe. Pour lier un style à des éléments dont les valeurs d'attribut peuvent contenir un trait d'union, vous pouvez utiliser la construction suivante :

[attribut|="valeur"] ( style )
Sélecteur[attribut|="valeur"] ( style )

Le style est appliqué aux éléments dont la valeur d'attribut commence par la valeur spécifiée suivie d'un trait d'union. Par exemple:

{
couleur : rouge ;
taille de police : 150 % ;
}
...

• Point 1


• Point 2


• Point 3


• Point 4

et c'est un texte normal

Dans l'exemple, la règle de style s'applique uniquement aux éléments de liste dont le nom de classe commence par valeur "menu- ".

5. La valeur de l'attribut commence par un texte spécifique

Ce sélecteur définit le style d'un élément si la valeur de l'attribut de balise commence par une valeur spécifique. Il peut y avoir deux options :

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

Dans le premier cas style s'applique à tous les éléments dont les balises ont un attribut avec le spécifié nom et une valeur commençant par le spécifié sous-chaînes. Dans le deuxième cas, la même chose, seulement pour certains éléments précisés dans sélecteur principal. Exemple:

un(
couleur : vert ;
poids de la police : gras ;
}
...

et c'est un texte normal

L'exemple montre comment afficher différemment les liens externes et les liens internes. Les liens externes commencent toujours par la chaîne « http:// ». Par conséquent, dans le sélecteur, nous indiquons que le style sera appliqué uniquement aux liens qui ont l'attribut href commence par un sens http://.

6. La valeur de l'attribut se termine par un certain texte

Lie un style aux éléments dont la valeur d'attribut se termine par le texte spécifié. A la syntaxe suivante :

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

Dans le premier cas style s'applique à tous les éléments qui ont attribut avec le spécifié nom et a une signification se terminant par le spécifié sous-chaîne. Dans le deuxième cas, la même chose, uniquement à l'endroit indiqué sélecteurs. De cette manière, par exemple, différents formats d'images graphiques peuvent être affichés différemment. Par exemple:

IMG (
bordure : 5px rouge uni ;
}
...

Image GIF

Format d'image png

et c'est un texte normal

Dans l'exemple, toutes les images avec une extension GIF seront affichées avec une bordure rouge de cinq pixels d'épaisseur.

7. La valeur de l'attribut contient la chaîne spécifiée

Ce sélecteur lie un style aux balises dont la valeur d'attribut contient un texte spécifique. Syntaxe:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Style se lie aux éléments qui ont attribut avec le nom spécifié et sa valeur contient le spécifié sous-chaîne. Par exemple:

IMG (
bordure : 5px rouge uni ;
}
...

Image du dossier galerie

Image d'un autre dossier

et c'est un texte normal

Dans l'exemple, le style est appliqué aux images chargées à partir du dossier "galerie".

Tout dépend des sélecteurs d'attributs. Toutes les méthodes ci-dessus peuvent être combinées entre elles :

Sélecteur[attribute1="valeur1"][attribute2="valeur2"] ( style )

De plus, permettez-moi de vous rappeler les sélecteurs CSS spéciaux :

• à l'aide des symboles « + » et « ~ » sont formés ;
• le symbole ">" lie les styles CSS à filiales balises;
• symbole<пробел>génère des sélecteurs de contexte.

Dans les prochains articles, nous examinerons également les pseudo-éléments et les pseudo-classes, qui fournissent de puissants outils de gestion de style.

C'est tout, à bientôt.