Introduction aux types de sélecteurs CSS
Les types de sélecteurs CSS sont utilisés pour choisir le contenu que nous voulons styliser. Il aide à sélectionner des éléments en fonction de leur classe, id, type, etc. Un sélecteur CSS est un composant de l'ensemble de règles CSS.
Types de sélecteurs CSS
Il existe 5 variétés de sélecteurs CSS disponibles pour nous. Nous examinerons les sélecteurs CSS importants suivants:
- Sélecteur universel CSS.
- Sélecteur d'éléments CSS.
- Sélecteur d'ID CSS.
- Sélecteur de classes CSS.
- Sélecteur d'attributs CSS.
1. Sélecteur universel CSS
Dans une page HTML, le contenu dépend des balises HTML. Une paire de balises définit un élément de page Web spécifique. Le sélecteur universel CSS sélectionne tous les éléments d'une page Web.
Exemple:
* (
color: blue;
font-size: 21px;
)
Ces deux lignes de code entourées d'accolades affecteront tous les éléments présents sur la page HTML. Nous déclarons un sélecteur universel à l'aide d'un astérisque au début de l'accolade. Le sélecteur universel peut être utilisé avec les autres sélecteurs en combinaison.
2. Sélecteur d'élément CSS
Le sélecteur d'élément CSS est également appelé sélecteur de type. Le sélecteur d'élément en CSS essaie de faire correspondre les éléments HTML portant le même nom. Par conséquent, un sélecteur de
- correspond à tous les
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- Questions d'entretiens chez CSS
- SASS vs SCSS
- Questions d'entretiens chez SASS
- Exemples de liste ordonnée HTML
- éléments, c'est-à-dire toutes les listes non ordonnées de cette page HTML.
Voyons un exemple pour le sélecteur d'élément.
ul (
border: solid 1px #ccc;
)
Pour mieux comprendre cela, regardons un exemple de code HTML pour appliquer le code CSS que nous avons écrit ci-dessus.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Texte de démonstration
Dans cet exemple, nous trouverons principalement trois éléments à savoir
- élément, la balise et un autre
- élément. Étant donné que notre code CSS s'applique à la
- spécifiquement, les modifications de la frontière ne seront effectuées que pour notre
- balises, et non pour les balises. Habituellement, ces modifications ne s'appliquent pas au contenu du
- balises également, mais dans certains scénarios, les styles peuvent s'appliquer aux éléments internes.
3. Sélecteur d'ID CSS
Le sélecteur d'ID CSS aide le développeur à faire correspondre l'ID créé par le développeur à son contenu de style. Le sélecteur d'ID est utilisé à l'aide du signe de hachage (#) avant le nom d'ID déclaré par le développeur. Le sélecteur d'ID correspond à chaque élément HTML ayant un attribut ID avec la même valeur que celle du sélecteur, sans le signe de hachage.
Voici un exemple:
#box (
width: 90px;
margin: 10px;
)
Ce code CSS peut être utilisé pour faire correspondre l'élément ayant l'id 'box', comme dans la phrase suivante.
Ici, la balise n'est qu'un exemple. Nous pouvons écrire l'attribut ID pour n'importe quelle balise HTML. Le sélecteur d'ID correspond à l'attribut ID dans l'élément et recherche son style. Dans notre exemple, le style s'applique tant que tout élément contient l'attribut ID «boîte».
La valeur de l'ID utilisé est censée être unique. Si le même ID est utilisé pour deux éléments ou plus, le code est techniquement invalide, mais le style de l'élément s'appliquera toujours, donc avoir le même ID est généralement évité.
Devoir utiliser un ID différent à chaque fois pour chaque page HTML, est assez rigide. Outre les problèmes de rigidité, les sélecteurs d'ID en CSS sont également confrontés au problème de spécificité.
4. Sélecteur de classes CSS
Le sélecteur de classe CSS est l'un des sélecteurs les plus utiles de tous les sélecteurs. Il est déclaré en utilisant un point suivi du nom de la classe. Ce nom de classe est défini par le codeur, comme c'est le cas avec le sélecteur d'ID. Le sélecteur de classe recherche chaque élément ayant une valeur d'attribut avec le même nom que le nom de classe, sans le point.
Exemple:
.square (
margin: 20px;
width: 20px;
)
Ce code CSS peut être utilisé pour faire correspondre l'élément ayant le carré de classe, comme dans la phrase suivante.
Ce style s'applique également à tous les autres éléments HTML ayant une valeur d'attribut pour la classe comme «carré». Un élément ayant la même valeur d'attribut de classe nous aide à réutiliser les styles et évite les répétitions inutiles. De plus, le sélecteur de classes est avantageux car il nous permet d'ajouter plusieurs classes à un élément particulier. Nous pouvons ajouter plusieurs classes à l'attribut en séparant chaque classe par un espace.
Exemple:
Ici, le carré, le gras et la forme sont trois types de classes différents.
5. Sélecteur d'attributs CSS
Le sélecteur d'attributs CSS style les contenus en fonction de l'attribut et de la valeur d'attribut mentionnés entre crochets. Aucun espace ne peut être présent devant le support carré d'ouverture.
input(type="text") (
background-color: #fff;
width: 100px;
)
Ce code CSS correspondrait à l'élément HTML suivant.
De même, si la valeur de l'attribut 'type' change, le sélecteur d'attribut ne correspondra pas. Par exemple, le sélecteur ne correspondrait pas à l'attribut si la valeur de «type» passait de «texte» à «soumettre». Si le sélecteur d'attribut est déclaré avec uniquement l'attribut et sans valeur d'attribut, il correspondra à tous les éléments HTML avec l'attribut 'type', que la valeur soit 'text' ou 'submit'.
Exemple:
input(type) (
background-color: #fff;
width: 100px;
)
Nous pouvons également utiliser des sélecteurs d'attributs sans spécification d'une valeur en dehors des crochets. Cela nous aidera à cibler l'attribut uniquement, quel que soit l'élément. Dans notre exemple, il ciblera en fonction de l'attribut 'type', quel que soit l'élément 'input'. Les sélecteurs CSS nous aident à simplifier notre code et nous permettent d'utiliser et de réutiliser le même code CSS pour divers éléments HTML. Ils nous aident à concevoir des segments et des portions spécifiques de notre page Web. Ils nous offrent la possibilité de styliser uniformément des éléments similaires dans notre page Web. Les sélecteurs CSS sont donc une partie importante de la courbe d'apprentissage du CSS.
Articles recommandés
Cela a été un guide pour les types de sélecteurs CSS. Ici, nous avons discuté des différents types de sélecteurs CSS avec un exemple. Vous pouvez également consulter nos autres articles suggérés pour en savoir plus -