Lors de la création d'un style pour un site, lorsque plusieurs sélecteurs sont utilisés simultanément, des règles de style en double peuvent apparaître. Pour éviter de répéter deux fois les mêmes éléments, ils peuvent être regroupés pour faciliter la présentation et la réduction du code. L'exemple 17.1 montre une entrée typique, chaque sélecteur ayant son propre ensemble de propriétés de style.

Exemple 17.1. Style pour chaque sélecteur

H1 (famille de polices : Arial, Helvetica, sans-serif ; taille de police : 160 % ; couleur : #003 ; ) H2 (famille de polices : Arial, Helvetica, sans-serif ; taille de police : 135 % ; couleur : #333; ) H3 (famille de polices : Arial, Helvetica, sans-serif ; taille de police : 120 % ; couleur : #900 ; ) P (famille de polices : Times, serif ; )

À partir de cet exemple, vous pouvez voir que le style des balises de titre contient la même valeur de famille de polices. Le regroupement vous permet de définir une propriété pour plusieurs sélecteurs à la fois, comme le montre l'exemple 17.2.

Exemple 17.2. Sélecteurs groupés

H1, H2, H3 (famille de polices : Arial, Helvetica, sans-serif ; ) H1 (taille de police : 160 % ; couleur : #003 ; ) H2 (taille de police : 135 % ; couleur : #333 ; ) H3 ( taille de police : 120 % ; couleur : #900 ; )

Dans cet exemple, la même famille de polices pour tous les sélecteurs est appliquée à plusieurs balises à la fois, et des propriétés individuelles sont déjà ajoutées séparément à chaque sélecteur.

Les sélecteurs sont regroupés sous forme de liste de balises séparées par des virgules. Un groupe peut inclure non seulement des sélecteurs de balises, mais également des identifiants et des classes. La syntaxe générale est la suivante.

Sélecteur 1, Sélecteur 2, ... Sélecteur N (Description des règles de style)

Lorsqu'elles sont écrites de cette façon, les règles de style s'appliquent à tous les sélecteurs répertoriés dans le même groupe.

Questions à vérifier

1. Quelle couleur d'arrière-plan l'élément avec la classe de bouton aura-t-il lorsque le style ci-dessus est activé ?

Bgzapas, .button, h1 ( taille de police : 1,2em ; remplissage : 10px ; couleur d'arrière-plan : #fcfaed ; ) .bgzapas ( couleur d'arrière-plan : #e7f2d7 ; ) .button, h2 ( largeur : 95px ; taille de police : 11px ; couleur : #f3fced ; couleur d'arrière-plan : #5ca22e ; ) .bgzapas, .button (couleur d'arrière-plan : #d9d7f2 ; )

1. #fcfaed
2. #e7f2d7
3. #f3fced
4. #5ca22e
5. #d9d7f2

Un sélecteur fait partie d'une règle CSS qui indique au navigateur quel(s) élément(s) d'une page Web sera stylé.

Le terme sélecteur peut faire référence à un sélecteur simple, un sélecteur composé, un sélecteur complexe ou une liste de sélecteurs.

À sélecteurs simples se rapporter:

• sélecteur de type
• sélecteur universel
• sélecteurs d'attributs
• sélecteur d'identifiant
• sélecteur de classe
• pseudo-cours

Sélecteur CSS	Exemple	Description	CSS
.classe	.Ma classe	Sélectionne tous les éléments avec la classe myClass (class="myClass").	1
#identifiant	#principal	Sélectionne l'élément avec l'identifiant principal (id="main").	1
	*	Sélection de tous les éléments.	2
élément	portée	Sélection de tous les éléments .	1
élément, élément	div, durée	Sélection de tous les éléments et tous les éléments .	1
[attribut]		Sélectionne tous les éléments avec un attribut title.	2
[attribut="valeur"]		Sélectionne tous les éléments avec un attribut title dont la valeur correspond exactement à la valeur spécifiée dans le sélecteur (title="cost"). !}	2
[attribut~="valeur"]		Sélectionne tous les éléments avec un attribut title dont la valeur (n'importe où) contient la sous-chaîne (sous forme d'un seul mot) "one" (title="un et deux"). !}	2
[attribut|="valeur"]		Sélectionne tous les éléments avec un attribut lang dont la valeur commence par "ru".	2
[attribut^="valeur"]	un	Sélection de chaque élément avec un attribut href dont la valeur commence par "https".	3
[attribut$="valeur"]		Sélectionne tous les éléments avec un attribut src dont la valeur se termine par ".png" (src="some_img.png").	3
[attribut*="valeur"]		Sélectionne tous les éléments avec un attribut title dont la valeur (n'importe où) contient la sous-chaîne (sous la forme d'un seul mot ou d'une partie de celui-ci) "un" (title="un et deux"). !}	3

Sélecteur composite est une séquence de sélecteurs simples qui ne sont pas séparés par des combinateurs, c'est-à-dire qu'un sélecteur est immédiatement suivi du suivant. Il sélectionne un élément qui correspond à tous les sélecteurs simples qu'il contient. Le sélecteur de type ou le sélecteur universel inclus dans un sélecteur composé doit apparaître en premier dans cette séquence. Dans un sélecteur composé, un seul sélecteur de type ou sélecteur universel est autorisé.

Span.className p.className1.className2#someId:hover

Sélecteur complexe est une séquence de sélecteurs séparés par des combinateurs.

Liste des sélecteurs sont des sélecteurs séparés par des virgules.

Combinateurs

Pour combiner des sélecteurs CSS simples, des combinateurs sont utilisés pour indiquer la relation entre les sélecteurs simples. Il existe plusieurs combinateurs différents en CSS2, et un supplémentaire en CSS3, lorsque vous les utilisez, ils changent la nature du sélecteur lui-même.

Pseudo-classes

Une pseudo-classe est un simple sélecteur utilisé pour sélectionner quelque chose qui ne peut pas être sélectionné à l'aide d'autres sélecteurs ou qui peut être sélectionné de manière assez difficile.

Pseudo-classe	Exemple	Description	CSS
:lien	un lien	Sélectionne tous les liens non visités.	1
:a visité	a: visité	Sélectionnez tous les liens visités.	1
:actif	a: actif	Sélection d'un lien actif.	1
:flotter	a: survol	Sélection d'un lien lors du survol du curseur de la souris.	1
:se concentrer	entrée: focus	Sélection des éléments , qui est au centre.	2
:premier enfant	p:premier enfant	Sélection de chaque élément Qui est le premier enfant de son parent.	2
:lang(langue)	p:lang(fr)	Sélection de chaque élément Avec un attribut lang dont la valeur commence par "ru".	2
:premier du type	p : premier du type	Sélection de chaque élément Quel est le premier des éléments	3
:dernier-du-type	p:dernier du type	Sélection de chaque élément Quel est le dernier des éléments Son élément parent.	3
:uniquement de type	p: uniquement de type	Sélection de chaque élément Quel est le seul élément Son élément parent.	3
:fils unique	p:enfant unique	Sélection de chaque élément Quel est le seul élément enfant de son élément parent.	3
:ntième-enfant(n)	p: nième enfant (2)	Sélection de chaque élément Son élément parent.	3
:ntième-dernier-enfant(n)	p:ntième-dernier-enfant(2)	Sélection de chaque élément Qui est le deuxième enfant de son élément parent, à compter du dernier enfant.	3
:ntième-de-type(n)	p:nième-de-type(2)	Sélection de chaque élément Quel est le deuxième enfant Son élément parent.	3
:ntième-dernier-de-type(n)	p:ntième-dernier-de-type(2)	Sélection de chaque élément Quel est le deuxième enfant Son élément parent, à partir du dernier élément enfant.	3
	3
:non(sélecteur)	:pas p)	Sélection de tous les éléments sauf l'élément .	3

Pseudo-éléments

Un pseudo-élément est un élément virtuel qui n'existe pas explicitement dans l'arborescence des éléments du document. Les pseudo-éléments sont utilisés pour sélectionner des parties d'un élément qui ne peuvent pas être sélectionnées à l'aide d'autres sélecteurs, ainsi que pour styliser des parties d'un élément plutôt que l'élément entier.

Qu'est-ce qu'un sélecteur en CSS est une description de cet élément ou groupe d'éléments qui indique au navigateur quel élément sélectionner pour lui appliquer un style. Regardons les sélecteurs CSS de base.

1 FOIS

.topic-title ( couleur d'arrière-plan : jaune ; )

Sélecteur CSS par classe X. La différence entre id et class est que plusieurs éléments d'une page peuvent avoir la même classe, mais id est toujours unique. Les classes doivent être utilisées pour appliquer le même style à plusieurs éléments.

• Chrome
• Firefox
• Safari
• Opéra

2) #X

#content ( largeur : 960px ; marge : 0 auto ; )

Sélecteur d'identifiant CSS. Le signe dièse avant le sélecteur CSS X sélectionne un élément dont l'identifiant = X. Lors de l'attribution de styles par identifiant, vous devez toujours vous rappeler qu'il doit être unique - un seul de ces identifiants doit figurer sur la page. Il est donc préférable d’utiliser des sélecteurs par classes, combinaisons de classes ou noms de balises. Cependant, les sélecteurs d'identifiant sont parfaits pour les tests automatisés car... Ils vous permettent d'interagir immédiatement avec exactement l'élément souhaité et d'être sûr qu'il n'y en a qu'un seul en son genre sur la page.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

3) *

* ( marge : 0 ; remplissage : 0 ; )

Sélecteur CSS pour tous les éléments. Le symbole étoile sélectionne tous les éléments qui se trouvent sur la page. De nombreux développeurs l'utilisent pour supprimer (zéro) les valeurs de marge et de remplissage de tous les éléments de la page. Cependant, en pratique, il vaut mieux ne pas faire cela car ce sélecteur CSS charge assez lourdement le navigateur en recherchant parmi tous les éléments de la page.

Le symbole * peut également être utilisé pour sélectionner tous les éléments enfants :

#header * ( bordure : 5px gris uni ; )

Cet exemple sélectionne tous les enfants (descendants) de l'élément avec #header . Mais il ne faut jamais oublier que ce sélecteur est assez lourd pour le navigateur.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

4)X

a ( couleur : vert ; ) ol ( marge gauche : 15px ; )

Sélecteur de type CSS. Comment sélectionner tous les éléments du même type s’ils n’ont ni identifiant ni classes ? Cela vaut la peine d'utiliser un sélecteur de type d'élément CSS. Par exemple, pour sélectionner toutes les listes ordonnées sur une page, utilisez ol(...) comme indiqué ci-dessus.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

5) XY

li a (poids de la police : gras ; décoration du texte : aucun ; )

Sélecteur de descendant CSS ou Sélecteur d'élément enfant CSS est utilisé le plus souvent. Il est utilisé s'il est nécessaire de sélectionner des éléments d'un certain type parmi de nombreux éléments enfants. Par exemple, vous devez sélectionner tous les liens qui se trouvent dans l'élément li. Dans ce cas, utilisez ce sélecteur. Lorsque vous utilisez des chaînes de tels sélecteurs, demandez-vous toujours si une séquence de sélecteurs encore plus courte pourrait être utilisée pour mettre en évidence un élément donné.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

6) X + Oui

div + p ( famille de polices : "Helvetica Neue", Arial, sans-serif ; taille de police : 18 px ; )

Sélecteur d'éléments adjacents choisit seulement un élément de type Y qui vient immédiatement après l'élément X. Dans ce cas, chaque paragraphe immédiatement après chaque élément div recevra un type et une taille de police spéciaux.

Quels navigateurs sont pris en charge :
• IE7+
• Firefox
• Chrome
• Safari
• Chrome

7) X > Oui

#content > ul ( bordure : 1px vert uni ; )

Sélecteur de descendant CSS. La différence entre les sélecteurs X Y et X > Y est que le sélecteur CSS en question ne sélectionnera que les enfants immédiats des éléments (il ne sélectionnera que les descendants directs). Par exemple:

Le sélecteur CSS #content > ul sélectionnera uniquement un ul qui est un enfant direct du div avec id="container" . Il ne sélectionnera pas un ul qui est un enfant du premier li. Il s'agit d'un sélecteur CSS assez rapide.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

8) X ~ Oui

ol ~ p (marge gauche : 10px ; )

Sélecteur d'éléments frères (subling) moins strict que X + Y. Il sélectionnera non seulement le premier, mais aussi tous les autres p éléments suivant ol.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

a:lien ( couleur : vert ; ) a:visité ( couleur : gris ; )

Pseudo-classe : lien utilisé pour sélectionner tous les liens qui n’ont pas encore été cliqués. Si vous devez appliquer un certain style aux liens déjà visités, utilisez pseudo-classe : visité.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

10)X

une(couleur:rouge;)

Sélecteur d'attribut CSS. Cet exemple sélectionne uniquement les liens qui ont un attribut title.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

11)X

une ( couleur : jaune ; )

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

12)X

une ( couleur : #dfc11f; )

L'astérisque signifie que la valeur que vous recherchez doit se trouver quelque part dans l'attribut (n'importe quelle partie de l'attribut href). De cette façon, les liens de https://www..stijit.. seront également sélectionnés. La couleur or sera appliquée à tous les liens sélectionnés.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

13)X

a ( arrière-plan : url(path/to/external/icon.png) no-repeat ; padding-left : 15px; )

Certains sites comportent de petites icônes en forme de flèche à côté des liens vers d’autres sites pour indiquer qu’il s’agit de liens externes. Le carat « ^ » est un symbole pour indiquer le début d'une ligne. Ainsi, pour sélectionner toutes les balises dont href commence par http, vous devez utiliser un sélecteur CSS avec karat, comme le montre l'exemple ci-dessus.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

14)X

une(couleur:vert;)

Celui-ci utilise une expression régulière et le symbole $ pour indiquer la fin de la ligne. Dans cet exemple, nous recherchons tous les liens qui renvoient à des images avec une extension .jpg.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

15)X

une(couleur:vert;)

Ici, nous appliquons Sélecteur d'attribut personnalisé CSS. Nous ajoutons notre propre attribut data-filetype à chaque lien :

lien

Désormais, en utilisant le sélecteur CSS ci-dessus, vous pouvez sélectionner tous les liens menant à des images avec n'importe quelle extension.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

16)X

Le tilde (~) permet de mettre en évidence un attribut spécifique parmi une liste d'attributs séparés par un espace. Vous pouvez écrire notre propre attribut data-info, dans lequel vous pouvez spécifier plusieurs mots-clés séparés par un espace. De cette façon, vous pouvez indiquer que le lien est externe et mène à l’image.

lien

Grâce à cette technique, nous pouvons sélectionner des éléments avec les combinaisons d'attributs dont nous avons besoin :

/* Sélectionnez un élément dont l'attribut data-info contient la valeur external */ a ( color: green; ) /* Sélectionnez un élément dont l'attribut data-info contient la valeur image */ a ( border: 2px dashed black; )

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

17) X : coché

entrée : cochée (bordure : début noir de 3 px ; )

Cette pseudo-classe ne met en évidence que des éléments tels qu'une case à cocher ou un bouton radio, et uniquement lorsqu'ils sont déjà à l'état coché.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

18) X : après

Les pseudo-classes :before et :after sont très utiles : elles créent du contenu avant et après l'élément sélectionné.

Clearfix:after ( contenu : " " ; affichage : bloc ; clair : les deux ; visibilité : caché ; taille de police : 0 ; hauteur : 0 ; ) .clearfix ( *affichage : bloc en ligne ; _hauteur : 1% ; )

Ici, en utilisant la pseudo-classe:after, une ligne vide est créée après le bloc avec class.clearfix, puis effacée. Cette approche est utilisée s'il n'est pas possible d'appliquer la propriété overflow: Hidden.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

19) X : survoler

div:hover ( couleur d'arrière-plan : rgba(11,77,130,0.5); )

Applique un style spécifique à un élément lorsque le curseur de la souris le survole. Les anciennes versions d'Internet Explorer s'appliquent uniquement : survolez les liens.

A: survol ( border-bottom: 1px pointillé bleu; )

Quels navigateurs sont pris en charge :
• IE6+ (S'applique uniquement aux liens dans IE6)
• Chrome
• Firefox
• Safari
• Opéra

20) X:non(sélecteur)

div:not(#content) ( couleur : gris ; )

Pseudo-classe non (négations) Ceci est utile lorsque, par exemple, vous devez sélectionner tous les div sauf celui avec id="content" .

En utilisant le même principe, vous pouvez sélectionner tous les éléments sauf p :

*:not(p) ( couleur : bleu ; )

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

21) X :: pseudoElement

p::première ligne ( poids de la police : gras ; taille de la police : 24 px ; )

Les pseudo-éléments peuvent être utilisés pour appliquer des styles à des parties d'éléments, par exemple la première ligne d'un paragraphe ou la première lettre d'un mot. S'applique uniquement aux éléments de bloc.

Sélection de la première lettre d'un paragraphe :

P::première lettre (font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; )

Sélection de la première ligne d'un paragraphe :

P:première ligne ( taille de police : 28px ; poids de police : gras ; )

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra

22) X : premier enfant

ul li:premier-enfant ( border-top: none; )

Premier enfant de pseudo-classe sélectionne uniquement le premier enfant de l'élément parent. Souvent utilisé pour supprimer une bordure du premier élément d’une liste. Cette pseudo-classe existe depuis CSS1.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari
• Opéra 3.5+
• Android

23) X : dernier enfant

ul > li:dernier-enfant ( border-bottom : none; )

Dernier enfant de pseudo-classe sélectionne le dernier enfant de l'élément parent. Il n'est apparu que depuis CSS3.

Quels navigateurs sont pris en charge :
• IE9+ (IE8 prend en charge le premier enfant, mais pas le dernier enfant. Microsoft (c))
• Chrome
• Firefox
• Safari
• Opéra 9.6+
• Android

24) X : enfant unique

div p:enfant unique ( couleur : vert ; )

Enfant unique de pseudo-classe vous permet de sélectionner les éléments qui sont les seuls enfants de leurs parents.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox
• Safari3.0+
• Opéra 9.6+
• Android

25) X : nième enfant (n)

li:nt-enfant(3) ( couleur : noir ; )

Sélectionne l'élément enfant par le numéro spécifié dans le paramètre. sélecteur de nième enfant prend un entier comme paramètre, mais compte à partir de 1, c'est-à-dire si vous devez sélectionner le deuxième élément de la liste, utilisez li:nth-child(2) . Toutes les pseudo-classes utilisant le nième enfant n'apparaissaient qu'à partir de CSS3.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox 3.6+
• Safari3.1+
• Opéra 9.6+
• Android 2.1+
• iOS2.0+

26) X: nième-dernier-enfant (n)

li:ntième-dernier-enfant(2) ( couleur : rouge ; )

Si vous avez une grande liste d’éléments dans ul et que vous devez sélectionner le troisième élément à partir de la fin ? Au lieu d'écrire li:nth-child(109), vous pouvez utiliser sélecteur du dernier enfant nième-dernier enfant. Cette méthode est la même que la précédente, mais en partant de la fin.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox 3.6+
• Safari3.1+
• Opéra 9.6+
• Android 2.1+
• iOS2.0+

27) X: nième de type (n)

ul:nth-of-type(3) ( bordure : 1px pointillé noir ; )

S'il y a quatre listes non ordonnées sur une page et que vous n'avez besoin que de styliser la troisième, qui n'a pas d'identifiant unique, vous devez utiliser nième de type.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox 3.6+
• Safari3.1+
• Opéra 9.6+
• Android 2.1+
• iOS2.0+

28) X: nième-dernier-de-type (n)

ul:nth-last-of-type(3) ( bordure : crête bleue de 2 px ; )

Pseudo-classe nième-dernier-de-type(n) est destiné à sélectionner le nième élément d'un certain type à partir de la fin.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox 3.6+
• Safari3.1+
• Opéra 9.6+
• Android 2.1+
• iOS2.0+

29) X : uniquement de type

li:only-of-type ( font-weight: bold; )

Pseudo-classe uniquement de type sélectionne les éléments qui n'ont pas de voisins dans l'élément parent. Par exemple, vous pouvez sélectionner tous les uls qui contiennent uniquement des lis solitaires.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox 3.5+
• Safari3.1+
• Opéra 9.6+
• Android 2.1+
• iOS2.0+

30) X : premier du type

ul:premier-de-type > li:nth-child(3) ( style de police : italique; )

Pseudo-classe de premier type sélectionne le premier élément du type donné.

Quels navigateurs sont pris en charge :
• Chrome
• Firefox 3.5+
• Safari3.1+
• Opéra 9.5+
• Android 2.1+
• iOS2.0+

Dans la dernière leçon, nous avons examiné les moyens d'inclure CSS. Passons maintenant au langage lui-même.

Comme toute autre langue, CSS a sa propre syntaxe, mais extrêmement simple. Se compose de seulement deux composants :

1. Sélecteur(en sélectionnant l'objet avec lequel nous allons travailler. Par exemple, titre, div, table, etc.)
2. Bloc de style- description d'une ou plusieurs propriétés d'un objet - couleur, taille, etc. Consiste en accolades ()

Nous voyons comment le titre est un sélecteur ; dans le bloc de style, la propriété de couleur du texte est attribuée ( couleur) - bleu.
Bloc de style comprend propriétés Et leurs significations, qui sont séparés lorsqu'ils sont énumérés point-virgule (;), comme dans l'exemple ci-dessous.

Maintenant, nous en ajoutons un de plus propriété - formatage du texte (police). Nous y donnons signification taille du texte - 20 pixels.

Exemple CSS

Créez un dossier n'importe où, par exemple, leçon 2. Créez-y un fichier style.css. Copiez-y tout le code ci-dessous. Dans le code CSS, nous définissons les propriétés de la balise et les rubriques

Et

.

Code CSS(déposer style.css)

Corps(
arrière-plan : gris ;
Couleur blanche;
}
h1 (couleur : #0085cc ;)
h2 (couleur : blanc ;)
Veuillez noter qu'il n'y aura aucune différence si le bloc de style est écrit dans une ligne (h1,h2) ou dans une colonne (corps). Les deux options fonctionneront. Choisissez ce qui vous convient le mieux.

Créons maintenant un fichier HTML. Peu importe le nom, l'essentiel est que le chemin d'accès au fichier avec le code CSS soit correctement spécifié. Indiqués de la même manière que dans les liens, chemins d'accès aux images. L'exemple ci-dessous montre le chemin (style.css) vers le même répertoire que le fichier html. Autrement dit, les deux fichiers doivent se trouver dans le même dossier.

Code HTML

Rubrique h1

Cap h2

Le résultat du code peut être vu sur le lien ci-dessous.

Sélecteurs CSS

Dans les exemples ci-dessus, les sélecteurs étaient éléments de page: corps, h1, h2. Cependant, il existe des situations où vous devez travailler avec un élément spécifique, et non avec tous. Par exemple, tous les titres étaient bleus et un à la fin était noir. Il existe différents types de sélecteurs pour cela. Regardons-les de plus près.

Identifiants

ID de l'article est un sélecteur attribué à un élément et le rend unique. Régler en utilisant identifiant du paramètre.

Ce paragraphe se voit attribuer un identifiant. Il aura des propriétés uniques.

Les options de texte resteront à leurs valeurs par défaut.

Regardons un exemple

Code HTML et CSS

Texte qui sera bleu car il y a un identifiant

La couleur du texte restera par défaut.

Premièrement, dans les styles de tous les paragraphes, la propriété color est définie sur noir et le texte du paragraphe avec l'identifiant « bleu » sera bleu. Le sélecteur dans ce cas se compose d'un élément (p - paragraphe), d'un séparateur (# - désignation de l'identifiant) et du nom de l'identifiant (bleu).

Il est important de noter qu'en théorie l'identifiant n'est donné qu'à un seul élément auquel on souhaite donner des propriétés uniques. Oui, dans certains navigateurs, donner le même identifiant à deux éléments peut fonctionner. Toutefois, cela ne se produira pas partout.

Si vous souhaitez définir des styles pour plusieurs éléments, vous devez utiliser Des classes.

Des classes

Classe est un sélecteur qui permet d'appliquer des styles à un ou plusieurs éléments. Par exemple, id ne s'applique qu'à un seul élément unique. La valeur est le nom de l'élément.

Regardons un exemple :

Code HTML et CSS

La couleur du texte est noire.

Texte bleu.

Le texte est en gras et en bleu.

La couleur du texte est noire.

Le résultat est un paragraphe avec l'identifiant ( identifiant) le bleu aura du texte bleu, les éléments avec classe le bleu sera surligné en gras et en bleu. Et tous les autres éléments p aura une police noire.

Comme vous pouvez le constater, le cours peut être appliqué plusieurs fois. En conséquence, tous les éléments auront les propriétés décrites pour cette classe.

Sélecteurs unifiés

Sélecteurs unifiés (.) est un sélecteur qui peut être attribué à différents types d'éléments, par exemple des titres, des paragraphes et des blocs (divs). L'option la plus courante. Auparavant, nous utilisions la construction dans le code CSS p#bleu Et p.bleu, c'est-à-dire qu'ils ont d'abord indiqué le type d'élément (p - paragraphe), puis l'identifiant ou la classe elle-même. Pour que vous puissiez préciser la construction plus simplement, commencez tout de suite par .bleu. Un sélecteur similaire sera applicable non seulement aux paragraphes, mais aussi à d'autres éléments.

Code HTML et CSS

En-tête avec identifiant.

La couleur du texte est noire.

Le texte est en gras et en bleu.

Le texte de l'élément en ligne est également en gras et en bleu

Le résultat est un sélecteur unifié, dans ce cas la classe .bleu, nous avons appliqué à la fois un paragraphe (p), un bloc (div) et un élément de ligne (span). Le résultat est le même partout : le texte est en gras et en bleu.

Sélecteurs de contexte

Sélecteur de contexte est un sélecteur qui sélectionne un élément dans un groupe d'autres éléments. L'orthographe est marquée d'un espace. Pour simplifier les choses, passons directement à un exemple. Disons que nous souhaitons que le texte en gras contenu dans les paragraphes soit surligné dans une autre couleur.

Code HTML et CSS

La couleur du texte est noire. Mais les balises de police en gras ne sont pas mentionnées ici.

Texte en gras régulier, qui n'est pas contenu dans le paragraphe. Sa couleur ne change donc pas.

Et attention !!! Paragraphe avec une phrase police bleue en gras

Ainsi, seul le texte en gras (fort) qui figurera au paragraphe (p) sera surligné en bleu.

Regroupement des sélecteurs

Regroupement des sélecteurs- il s'agit d'une construction de feuille de style où le bloc de déclaration de style adresse un ou plusieurs éléments mentionnés précédemment et ajoute une nouvelle propriété.

Le texte est difficile à comprendre. Il vaut mieux prendre un exemple tout de suite.

H1, h2, h3 (couleur : bleu ; )
h1(taille de police:18px; )
h2(taille de police:16px; )
h3(taille de police:14px; )
Dans la première ligne, nous mentionnons immédiatement plusieurs éléments. Afin d'accéder à plusieurs éléments à la fois, vous devez les lister dans le sélecteur à l'aide du signe , (virgule) et espace. Il n’est AUCUN besoin de virgule ou d’espace avant le dernier élément à énumérer..

Par les mentions ultérieures de ces éléments, nous leur ajoutons de nouvelles valeurs de propriété. Dans ce cas, la taille de la police.

Code HTML et CSS

Rubrique h1

Cap h2

Titre h3

En conséquence, tous les titres seront bleus. Cependant, des tailles différentes, car les entrées ultérieures dans la feuille de style donnaient aux titres des tailles différentes.

L'utilisation du regroupement est une question controversée. Parmi avantages On peut noter qu’il est possible d’éviter de grandes parties du code, qui se dupliqueront largement dans le contenu. Parmi les inconvénients, on peut dire que l'utilisation d'un tel code, dans lequel des propriétés sont ajoutées à l'un ou l'autre élément à différents endroits, est assez problématique et peu pratique. Bien sûr, avec une écriture séquentielle appropriée, vous pouvez éviter de tels inconvénients, mais c’est une autre question.

Merci pour votre attention! La leçon est terminée !

Dans cet article, nous parlerons des sélecteurs CSS. Nous examinerons à la fois les anciens sélecteurs CSS, que même IE6 prend en charge, et les tout nouveaux sélecteurs CSS3, qui ne prennent en charge que les dernières versions des navigateurs. Alors, commençons.

1.

* ( marge : 0 ; remplissage : 0 ; )

Commençons par les choses les plus simples puis passons aux choses plus avancées.

Ce sélecteur CSS sélectionne chaque élément de la page. De nombreux développeurs l'utilisent pour réinitialiser les valeurs de marge et de remplissage de tous les éléments. À première vue, c'est pratique, mais il vaut quand même mieux ne pas le faire dans le code de production. Ce sélecteur CSS est trop lourd pour le navigateur.

* peut également être utilisé pour mettre en évidence des éléments enfants.

#container * ( bordure : 1px noir uni ; )

Dans ce cas, tous les éléments enfants de #container sont sélectionnés. Encore une fois, essayez de ne pas en abuser.

Compatibilité

• IE6+
• Firefox
• Chrome
• Safari
• Opéra

2. #X

conteneur (largeur : 960 px ; marge : auto ; )

Un signe dièse avant le sélecteur CSS X mettra en évidence l'élément avec id = X. C'est très simple, mais soyez prudent lorsque vous utilisez id.

Posez-vous la question : dois-je absolument mettre en évidence par identifiant ?

Les valeurs id verrouillent étroitement le style sur l'élément et ne sont pas réutilisables. Il serait préférable d'utiliser des classes, des noms de balises, voire des pseudo-classes.

Compatibilité

• IE6+
• Firefox
• Chrome
• Safari
• Opéra

3.X

erreur (couleur : rouge ;)

Il s'agit d'un sélecteur CSS de classe X. La différence entre id et class est qu'une classe peut posséder plusieurs éléments sur une page. Utilisez des classes lorsque vous souhaitez appliquer un style à plusieurs éléments du même type. Lorsque vous utilisez id, vous devrez écrire un style pour chaque élément individuel.

Compatibilité

• IE6+
• Firefox
• Chrome
• Safari
• Chrome

4. XY

li a ( décoration de texte : aucun ; )

Le sélecteur d'élément enfant CSS est le plus courant. Si vous devez sélectionner des éléments d'un certain type parmi de nombreux éléments enfants, utilisez ce sélecteur. Par exemple, vous devez sélectionner tous les liens qui se trouvent dans l'élément li. Dans ce cas, utilisez ce sélecteur.

Vous ne devriez pas créer de sélecteurs CSS commeX Y Z A B.erreur. Demandez-vous toujours s'il est nécessaire d'écrire un sélecteur CSS aussi fastidieux pour mettre en évidence un élément donné.

Compatibilité

• IE6+
• Firefox
• Chrome
• Safari
• Chrome

5.X

a ( couleur : rouge ; ) ul ( marge gauche : 0 ; )

Que se passe-t-il si vous souhaitez couvrir tous les éléments d'un type donné sur une page ? Restez simple, utilisez un sélecteur de type CSS. Si vous devez sélectionner toutes les listes non ordonnées, utilisez ul().

Compatibilité

• IE6+
• Firefox
• Chrome
• Safari
• Opéra

a:lien ( couleur : rouge ; ) a:visted ( couleur : violet ; )

Nous utilisons la pseudo-classe:link pour mettre en évidence tous les liens qui n'ont pas encore été cliqués.

Si nous devons appliquer un certain style aux liens déjà visités, alors nous utilisons la pseudo-classe : visité.

Compatibilité

• IE7+
• Firefox
• Chrome
• Safari
• Opéra

7. X+Y

ul + p ( couleur : rouge ; )

Sélectionne l'élément suivant. Il choisira seulement un élément de type Y qui vient immédiatement après l'élément X. Dans l'exemple, le texte du premier paragraphe après chaque ul sera rouge.

Compatibilité

• IE7+
• Firefox
• Chrome
• Safari
• Chrome

8. X>Y

div#container > ul ( bordure : 1px noir uni ; )

La différence entre le standard X Y et X > Y est que le sélecteur CSS en question ne sélectionnera que les éléments enfants immédiats. Par exemple, considérons le code suivant.

• Élément de liste
  • Élément enfant
• Élément de liste
• Élément de liste
• Élément de liste

Le sélecteur CSS #container > ul sélectionnera uniquement les uls qui sont des enfants immédiats de divs avec id = containers . Il ne sélectionnera pas, par exemple, les uls qui sont les enfants du premier li s.

Par conséquent, vous pouvez obtenir des avantages en termes de performances en utilisant ce sélecteur CSS. En fait, cela est particulièrement recommandé lorsque vous travaillez avec jQuery ou d'autres bibliothèques qui sélectionnent des éléments en fonction de règles de sélection CSS.

Compatibilité

• IE7+
• Firefox
• Chrome
• Safari
• Opéra

9. X ~ Oui

ul ~ p ( couleur : rouge ; )

Ce sélecteur CSS est très similaire à X+Y, cependant il est moins restrictif. L'utilisation de ul + p sélectionnera uniquement le premier élément après X. Dans ce cas, tous les p éléments allant à ul seront sélectionnés.

Compatibilité

• IE7+
• Firefox
• Chrome
• Safari
• Opéra

10.X

une(couleur:vert;)

Les sélecteurs CSS peuvent également utiliser des attributs. Par exemple, dans cet exemple, nous avons sélectionné tous les liens qui ont l'attribut title. Les autres liens ne seront pas affectés.

Compatibilité

• IE7+
• Firefox
• Chrome
• Safari
• Opéra

11.X

une ( couleur : #ffde00; )

Veuillez noter qu'il existe des citations. N'oubliez pas de faire de même dans jQuery et autres bibliothèques JavaScript dans lesquelles les éléments sont sélectionnés à l'aide de sélecteurs CSS. Dans la mesure du possible, utilisez toujours les sélecteurs CSS CSS3.

Une bonne règle, mais trop stricte. Que faire si le lien ne mène pas directement vers, mais par exemple vers ? Dans ces cas, nous pouvons utiliser des expressions régulières.

Compatibilité

• IE7+
• Firefox
• Chrome
• Safari
• Chrome

12.X

une (couleur : #1f6053 ; )

Compatibilité

• IE7+
• Firefox
• Chrome
• Safari
• Opéra

13.X

a ( arrière-plan : url(path/to/external/icon.png) no-repeat ; padding-left : 10px; )

Vous êtes-vous déjà demandé comment certains sites Web peuvent afficher une petite icône à côté des liens externes ? Je suis sûr que vous les avez déjà vus, ils sont très mémorables.

« ^ » est le caractère le plus couramment utilisé dans les expressions régulières. Il est utilisé pour marquer le début d’une ligne. Si nous voulons couvrir toutes les balises dont href commence par http, nous devons utiliser le sélecteur CSS ci-dessus.

Veuillez noter que nous ne recherchons pas « http:// ». Ce n'est pas correct car les adresses commençant par https:// ne sont pas prises en compte

Et si l’on souhaite définir un style uniquement pour les liens menant vers une photo ? Besoin de trouver fin lignes.

Compatibilité

• IE7+
• Firefox
• Safari
• Opéra

14.X

une(couleur:rouge;)

Encore une fois, nous utilisons le caractère d'expression régulière « $ » pour indiquer la fin de la ligne. Dans celui-ci, nous recherchons des liens qui font référence à des fichiers jpg, ou des URL qui ont « .jpg » à la fin.

Compatibilité

• IE7+
• Firefox
• Safari
• Opéra

15.X

une( couleur : rouge ; )

Comment pouvons-nous maintenant écrire un sélecteur CSS qui mettra en évidence les liens vers tous les types d’images ? Par exemple, nous pourrions écrire ainsi :

A, a, a, a ( couleur : rouge ; )

Mais c'est inefficace. Une autre solution possible consiste à utiliser des attributs personnalisés. Pourquoi n'ajoutons-nous pas notre propre attribut type de fichier de données dans chaque lien ?

Lien vers l'image

A ( couleur : rouge ; )

Compatibilité

• IE7+
• Firefox
• Safari
• Opéra

16.X

a ( couleur : rouge ; ) a ( bordure : 1px noir uni ; )

Voici quelque chose de spécial. Tout le monde ne connaît pas ce sélecteur CSS. Le tilde (~) vous permet de mettre en évidence un attribut spécifique dans une liste d'attributs séparés par des virgules.

Par exemple, nous pouvons définir notre propre attribut data-info, qui comprend plusieurs mots-clés séparés par des espaces. Ainsi, on peut indiquer que le lien est externe et qu’il renvoie vers une image.

Cliquez sur moi

Ici, le code Html est en place, écrivons maintenant les styles.

Pas mal, non ?

Compatibilité

• IE7+
• Firefox
• Safari
• Opéra

17. X : coché

entrée: coché ( border: 1px noir uni; )

Cette pseudo-classe ne met en évidence que les éléments de l'interface utilisateur tels qu'un bouton radio ou une case à cocher. De plus, ceux qui sont marqués/sélectionnés. Très simple.

Compatibilité

• IE9+
• Firefox
• Safari
• Opéra

18. X : après

Les pseudo-classes :before et :after sont très cool. Il semble qu’il existe chaque jour de nouvelles façons de les utiliser efficacement. Ils génèrent simplement du contenu autour de l’élément sélectionné.

De nombreuses personnes se sont familiarisées avec ces pseudo-classes en travaillant avec le hack clear-fix.

Clearfix:after ( contenu : " " ; affichage : bloc ; clair : les deux ; visibilité : caché ; taille de police : 0 ; hauteur : 0 ; ) .clearfix ( *affichage : bloc en ligne ; _hauteur : 1% ; )

Ce pirater utilise :after pour ajouter un espace après un élément et l'empêcher de s'enrouler.

Selon la spécification CSS3, vous devez utiliser deux deux-points (::). Cependant, vous pouvez utiliser un seul deux-points pour des raisons de compatibilité.

Compatibilité

• IE8+
• Firefox
• Safari
• Opéra

19. X : survoler

div: survol ( arrière-plan : #e3e3e3; )

Vous souhaitez appliquer un style à un élément lorsque vous le survolez ? Puis celui-ci CSS-sélecteur pour vous.

Veuillez noter que les anciennes versions d'Internet Explorer utilisent : flotter uniquement pour les liens.

Ce CSS-le sélecteur est souvent utilisé pour mettre Bordure du bas aux liens lorsqu'ils sont survolés avec la souris.

A: survol ( border-bottom : 1px noir uni ; )

bordure inférieure : 1px noir uni ;ça a l'air mieux que décoration de texte : souligner ;

Compatibilité

• IE6+ (Dans IE6 : le survol doit être appliqué sur le lien)
• Firefox
• Safari
• Opéra

20. X:non(sélecteur)

div:not(#container) ( couleur : bleu ; )

La pseudo-classe de négation peut être très utile. Disons que vous devez sélectionner tous les divs sauf celui avec id = récipient. Le code ci-dessus gérera cela !

Ou, si vous devez sélectionner tous les éléments sauf p.

*:not(p) ( couleur : vert ; )

Compatibilité

• IE9+
• Firefox
• Safari
• Opéra

21. X :: pseudo élément

Nous pouvons utiliser des pseudo-éléments pour styliser des fragments d'éléments, comme la première ligne ou la première lettre. Gardez à l’esprit qu’ils doivent être appliqués aux éléments au niveau du bloc pour prendre effet.

Un pseudo-élément est spécifié par deux deux-points : ::

Sélectionnez la première lettre du paragraphe

P::première lettre ( float : gauche ; taille de police : 2em ; poids de police : gras ; famille de polices : cursive ; padding-right : 2px ; )

Ce code sélectionnera tous les paragraphes, sélectionnera à son tour les premières lettres et leur appliquera ce style.

Sélectionnez la première ligne d'un paragraphe

P::première ligne ( poids de la police : gras ; taille de la police : 1,2em ; )

De même, avec ::first-line, nous stylisons la première ligne d'un paragraphe.

« Pour la compatibilité avec les feuilles de style existantes, le navigateur doit comprendre les précédentes désignations de pseudo-éléments à deux points introduites dans CSS 1, 2 ( :première ligne, :première lettre, :avant et:après). Cette compatibilité n'est pas autorisée pour les nouveaux pseudo-éléments introduits dans cette spécification"

Compatibilité

• IE6+
• Firefox
• Safari
• Opéra

22. X: nième enfant (n)

li:ntième-enfant(3) ( couleur : rouge ; )

Auparavant, on ne pouvait pas sélectionner, par exemple, le troisième élément enfant ? le nième enfant résout ça !

noter que nième enfant prend un entier comme paramètre, mais ne compte pas à partir de 0. Si vous souhaitez sélectionner le deuxième élément de la liste, utilisez li: nième-enfant (2) .

Nous pouvons même sélectionner un élément sur quatre de la liste en écrivant simplement (0)li:ntième-enfant(4n)(/0).

Compatibilité

• IE9+
• Firefox 3.5+
• Safari

23. X: nième-dernier-enfant (n)

li:ntième-dernier-enfant(2) ( couleur : rouge ; )

Que faire si vous avez une énorme liste d'éléments dans ul, et il doit sélectionner le troisième élément à partir de la fin ? Au lieu d'écrire li:nth-child(397), vous pouvez utiliser nième-dernier-enfant.

Cette méthode est presque identique à celle ci-dessus, mais commence par la fin.

Compatibilité

• IE9+
• Firefox 3.5+
• Safari
• Opéra

24. X: nième de type (n)

ul:nth-of-type(3) ( bordure : 1px noir uni ; )

Il arrive que vous deviez sélectionner non pas un élément enfant, mais un élément d'un certain type.

Imaginez qu'il y ait cinq listes non ordonnées sur une page. . Si vous souhaitez appliquer le style au troisième uniquement ul, qui n'a pas d'unique identifiant, besoin d'utiliser nième de type.

Compatibilité

• IE9+
• Firefox 3.5+
• Safari

25. X: nième-dernier-de-type (n)

ul:nth-last-of-type(3) ( bordure : 1px noir uni ; )

Nous pouvons également utiliser nième-dernier-type, en comptant les éléments à partir de la fin.

Compatibilité

• IE9+
• Firefox 3.5+
• Safari
• Opéra

26. X : premier enfant

ul li:premier-enfant ( border-top: none; )

Cette pseudo-classe sélectionne le premier élément enfant. Souvent utilisé pour supprimer les bordures du premier et du dernier élément d’une liste.

Compatibilité

• IE7+
• Firefox
• Safari
• Opéra

27. X : dernier enfant

ul > li:dernier-enfant ( couleur : vert ; )

En revanche :premier-enfant:dernier-enfant sélectionne le dernier élément enfant.

Compatibilité

• IE9 + (Oui, oui, IE8 prend en charge :first-child , mais ne prend pas en charge :last-child. Bonjour Microsoft !)
• Firefox
• Safari
• Opéra

28. X : enfant unique

div p:enfant unique ( couleur : rouge ; )

On ne voit pas très souvent cette pseudo-classe, mais elle existe néanmoins.

Il permet de sélectionner les éléments qui sont les seuls enfants. Par exemple, appliquez le style ci-dessus à ce code html :

Un paragraphe.

Deux paragraphes

Deux paragraphes

Seul p du premier div sera sélectionné car c'est le seul élément enfant.

Compatibilité

• IE9+
• Firefox
• Safari
• Opéra

29. X : uniquement de type

Une pseudo-classe très intéressante. Cela affecte les éléments qui n'ont pas de voisins dans l'élément parent. A titre d'exemple, sélectionnons un ul avec un seul élément dans la liste.

La seule solution est d'utiliser uniquement de type .

Ul > li:only-of-type ( font-weight: bold; )

Compatibilité

• IE9+
• Firefox 3.5+
• Safari
• Opéra

30. X : premier du type

first-of-type sélectionne le premier élément du type donné.

Pour mieux comprendre, donnons

Paragraphe

• Paragraphe 1
• Point 2

• Point 3
• Point 4

Essayez maintenant de comprendre comment mettre en évidence le point 2.

Solution 1

Ul:premier-de-type > li:nth-child(2) ( font-weight: bold; )

Solution 2

P + ul li:dernier-enfant ( font-weight: bold; )

Solution 3

Ul:premier-de-type li:nth-last-child(1) ( font-weight: bold; )

Compatibilité

• IE9+
• Firefox 3.5+
• Safari
• Opéra