Comment sélectionner un élément HTML dans CSS

Pour améliorer l'apparence des pages Web écrites en HTML ou XML, les programmeurs Web utilisent des règles CSS pour embellir leurs pages Web. La syntaxe CSS fournit une large gamme de sélecteurs Pour sélectionner des éléments HTML. La sélection des éléments HTML à l'aide de sélecteurs CSS permettra au programmeur à améliorer leurs sites Web. Dans ce tutoriel, nous allons apprendre un tas de sélecteurs CSS avec lesquels nous pouvons sélectionner des éléments HTML.

Sélecteurs CSS

Un sélecteur est une règle CSS de base. Ces sélecteurs informent le navigateur pour sélectionner des éléments HTML particuliers et les styliser de la manière spécifiée.

Syntaxe:

H2
Texte-aligne: Centre;
Couleur: Aqua;

p
taille de police: 12px;
Couleur bleue;

Comme mentionné déjà, il existe un certain nombre de sélecteurs fournis par CSS qui sont.

1. Sélecteurs de base
2. Sélecteur d'attribut
3. Sécoupeurs de combinateurs
4. Sélecteur de type
5. Sélecteurs de pseudo-classe
6. Sélections de pseudo-éléments

Apprenons-les en détail.

Sélecteurs de base

Cette catégorie de sélecteurs se compose de certains sélecteurs CSS primaires.

Sélecteur d'élément

Un sélecteur d'élément est utilisé pour sélectionner des éléments HTML sur la base. Par exemple,

H2
Texte-aligne: Centre;
Couleur bleue;

Dans l'exemple ci-dessus, le sélecteur d'éléments sélectionne

élément et définit sa couleur en bleu, et aligne le texte au centre de la page / conteneur.

Sélecteur d'identité

Puisque chaque élément peut avoir un ID unique, ce sélecteur cible cet ID pour sélectionner l'élément et attribuer des valeurs à ses propriétés. Pour sélectionner un élément HTML à l'aide de son ID, nous utilisons un symbole de hachage (#) suivi d'une ID.

Dans l'exemple suivant, le sélecteur d'ID sélectionne un élément avec id = «head1» et ajuste son alignement vers la gauche tout en couleur à aqua.

# head1
Texte-aligne: gauche;
Couleur: Aqua;

Sélecteur de classe

Le sélecteur de classe styles un élément HTML sur la base d'un attribut de classe spécifique. Afin de sélectionner un élément HTML en utilisant son nom de classe, nous utilisons un point suivi d'un nom de classe.

.principal
Texte-aligne: gauche;
marge: 3px;
marge-fond: 3px;

Sélecteur universel

Afin de sélectionner tous les éléments d'une page HTML, nous utilisons un sélecteur universel. Il est représenté par un signe d'astérisque (*).

*
couleur beige;
Texte-aligne: justifier;

Sélecteur de regroupement

Dans le but de sélectionner tous ces éléments que vous souhaitez sélectionner de manière similaire, utilisez le sélecteur de groupement.

H1, H2, P
la couleur noire;
Texte-aligne: Centre;
Font-Family: «Times New Roman», Times, Serif;

Sélecteur d'attribut

Un sélecteur d'attribut utilise des noms d'attribut spécifiques pour sélectionner des éléments HTML.

une cible]
la couleur verte;
Texte-aligne: Centre;

Dans l'exemple ci-dessus, le sélecteur IIS sélectionne tous les éléments de cette cible d'attribut. Le sélecteur d'attribut est divisé en différentes catégories. Le tableau ci-dessous les explique.

Sélecteurs d'attribut	Description	Exemple
[attribut = «valeur»]	Il sélectionne des éléments ayant un attribut et une valeur particulières.	div [lang = fr] background-Color = Red;
[attribut ~ = «valeur»]	Il sélectionne des éléments qui ont un mot particulier dans leur valeur d'attribut.	img [titre ~ = "fleur"] bordure: 2px bleu solide
[attribut | = «valeur»]	Il sélectionne un élément avec un attribut particulier dont la valeur peut être précisément la valeur particulière ou la valeur particulière qui vient après un trait d'union (-).	p [lang | = en] taille de police: 12px;
[Attribute ^ = «Valeur»]	Il sélectionne des éléments avec des attributs avec des valeurs commençant par une valeur particulière.	a [classe ^ = «top»] fond de fond: rose;
[attribut $ = «valeur»]	Il sélectionne des éléments avec des attributs ayant une valeur de fin spécifique.	IMG [src $ = chien.jpg] border: 2px; Jaune solide
[attribut * = «valeur»]	Il sélectionne un élément avec une valeur d'attribut ayant une valeur particulière.	a [href * = "Exemple"] couleur: bleu;

Sécoupeurs de combinateurs

Afin de combiner un ou plusieurs types de sélecteurs CSS de base, nous utilisons un sélecteur de combinateur. Il existe quatre types de sélecteurs de combinateurs qui sont;

Sécoupeurs de combinateurs	Description	Exemple
Descendant	Il sélectionne des éléments qui sont des descendants d'un élément spécifique.	div p Couleur bleue;
Enfant	Il sélectionne les éléments qui sont les premiers enfants d'un certain élément.	div> p Couleur bleue;
Frère adjacent	Il sélectionne un élément qui vient immédiatement après un autre élément particulier.	div + p Couleur bleue;
Frère général	Il sélectionne tous ces éléments qui sont les prochains frères et sœurs d'un élément particulier.	div ~ p Couleur bleue;

Tapez des sélecteurs

Les sélecteurs de type sont utilisés dans CSS lorsque vous souhaitez sélectionner tous les éléments d'un type particulier dans un document. Par exemple.

portée
Color en arrière-plan: bleu;

Sélecteurs de pseudo-classe

Les sélecteurs de pseudo-classe sont utilisés lorsque vous souhaitez décrire un état particulier d'un élément. Différentes pseudo-classes sont.

Pseudo-classes	Description	Exemple
:lien	Il styles un lien qui n'a pas encore été visité.	a: lien couleur: aqua;
:a visité	Il styles un lien qui a déjà été visité.	A: Visité couleur: vert;
:flotter	Il styles un élément lorsque la souris plane dessus.	A: Hover Color: Pink
: acitve	Il styles un lien actif.	A: actif couleur: bleu;
:se concentrer	Il est utilisé pour styliser les éléments avec focus.	P: Focus fond de fond: violet;
:premier enfant	Il est utilisé pour coiffer le premier enfant d'un élément spécifique.	P: Premier enfant couleur: bleu;
:dernier enfant	Il correspond à tous ces élément qui est le dernier enfant de son parent.	P: dernier-enfant taille de police: 6px;
: Lang	Il spécifie la langue d'un élément particulier.	Q: Lang (Eng) Citations: "-" "-";

Sélections de pseudo-éléments

Afin de styliser certaines parties spécifiques d'un élément que des pseudo-éléments sont utilisés. Les pseudo-éléments sont les suivants;

Pseudo-éléments	Description	Exemple
::Première ligne	Il est utilisé pour coiffer la première ligne d'un texte.	P :: Première ligne Font-Size: 6px: Couleur: Rouge;
::première lettre	Il est utilisé pour coiffer la première lettre d'un texte.	P :: Première lettre Font-Weight: 7px; Couleur bleue;
::avant	Il ajoute du contenu avant un élément.	p :: avant img = “fleur.jpg ”;
::après	Il ajoute du contenu après un élément.	P :: After img = “fleur.jpg ”;
::marqueur	Il est utilisé pour styliser les marqueurs d'une liste.	:: marqueur couleur: rouge; Police-poids: 2px;
::sélection	Il est utilisé pour styliser la partie sélectionnée d'un élément.	:: Sélection fond de fond: bleu; taille de police: 2px;

Conclusion

Pour sélectionner un élément HTML dans CSS, CSS fournit des sélecteurs pour informer le navigateur pour sélectionner des éléments HTML particuliers et les styliser de la manière spécifiée. CSS fournit de nombreux sélecteurs. Ici, nous avons donné une liste de certains: sélecteurs de base, sélecteur d'attribut, sélecteur de type, sélecteurs de combinateurs, sélecteurs de pseudo-classe, sélecteurs de pseudo-éléments. Dans ce tutoriel, nous avons exploré diverses catégories de sélecteurs CSS et comment les utiliser.