Tout ce que vous devez savoir sur les sélecteurs CSS

Cet article présente un sujet intéressant et important connu sous le nom de sélecteurs CSS et le suit avec une démonstration pratique à l'appui.

Cet article présente un sujet intéressant et important appelé Sélectionne et suit avec une démonstration pratique de soutien. Les pointeurs suivants seront traités dans cet article,



Alors commençons alors,



Styliser les éléments HTML

Voyons ce qu'est le CSS avant de passer aux sélecteurs CSS. Si le HTML doit être considéré comme un squelette, alors CSS (Cascading Style Sheets) est comme les muscles et la peau. Le cerveau est JavaScript. Ainsi, pour une page Web, les styles CSS sont essentiellement la mise en page et la conception. Depuis le positionnement des images et du texte jusqu'à la taille de la police et la couleur d'arrière-plan, CSS contrôle l'apparence des éléments HTML dans un navigateur.

Vous pouvez mieux comprendre CSS, si vous avez une bonne compréhension de ce que sont les sélecteurs CSS. Ces sélecteurs vous permettent de cibler des éléments HTML spécifiques afin que vous puissiez leur appliquer le bon style.



Exemple - Sélecteurs CSS - EdurekaVoyons comment nous pouvons sélectionner des éléments HTML,

Comment sélectionner des éléments?

Dites, vous voulez qu'un certain titre soit stylé différemment du reste du contenu d'une page Web. Désormais, à l'aide des sélecteurs CSS, vous pouvez cibler cet élément HTML pour le styliser différemment. Les sélecteurs CSS aident à définir les éléments auxquels un certain ensemble de règles CSS s'appliquent. Il existe différents types de sélecteurs CSS qui vous permettent de choisir précisément les éléments que vous souhaitez styliser. Vous pouvez donner à la page Web entière un style général, puis travailler à votre façon de styliser d'autres éléments de la page.

Les sélecteurs font partie d'une règle CSS, et ces sélecteurs viennent juste avant la déclaration des blocs CSS. Pour une meilleure compréhension, vous pouvez vous référer à l'image ci-dessous.



Passer à l'article sur les sélecteurs CSS

Sélecteurs CSS

Ce sélecteur vous permet de sélectionner un élément HTML par son nom.

Considérez le code ci-dessous:

p {text-align: center color: magenta}

Ce style sera appliqué à chaque paragraphe.

Paragraphe 1

Paragraphe 2

Ce code vous donnera la sortie suivante:

Ce style sera appliqué à chaque paragraphe

Paragraphe 1

Paragraphe 2

Dans le code ci-dessus, les éléments HTML ont été alignés au centre et ont la couleur «magenta».

quelles sont les raisons de créer une instance de la classe de fichiers?

Passer à l'article sur les sélecteurs CSS

Sélecteur d'identifiant CSS

En sélectionnant l'attribut id d'un élément HTML, vous pouvez sélectionner cet élément spécifique. Étant donné que l'id est unique à une page, vous pouvez sélectionner le bon élément en utilisant l'attribut id.

Vous pouvez sélectionner l'élément HTML en utilisant «#» suivi de l'ID de cet élément. Par exemple, «#firstname» sélectionne l'élément dont l'identifiant est «firstname».

Considérez le code suivant:

# para1 {text-align: center color: orange}

Bonjour le monde

comment convertir une chaîne en date

Ce paragraphe ne sera pas affecté.

La sortie pour le code ci-dessus est:

Bonjour le monde

Ce paragraphe ne sera pas affecté.

Comme vous pouvez le voir dans la sortie ci-dessus, en incluant id = 'para1', nous avons pu changer la couleur de cet élément en orange. L'autre élément qui n'a pas cela reste inchangé.

Passer à l'article sur les sélecteurs CSS

Sélecteur de classe CSS

À l'aide du sélecteur de classe, vous pouvez sélectionner des éléments HTML qui ont un attribut de classe spécifique. Vous pouvez définir le sélecteur à l'aide d'un point (symbole point) suivi du nom de la classe. Par exemple, .intro sélectionne les éléments où la classe est «intro». Une chose à garder à l'esprit est que vous ne pouvez jamais commencer un nom de classe par un nombre.

Considérez le code suivant:

.center {text-align: center color: pink}

Ce titre est rose et aligné au centre.

Ce paragraphe est rose et aligné au centre.

La sortie du code ci-dessus est:



Ce titre est rose et aligné au centre.

Ce paragraphe est rose et aligné au centre.

Vous pouvez utiliser des sélecteurs de classe CSS pour un élément spécifique. Si vous souhaitez qu'un seul élément spécifique soit stylé, vous pouvez utiliser le nom de l'élément avec le sélecteur de classe.



Par exemple, considérez le code suivant:

p.center {text-align: center color: pink}

Cette rubrique n'est pas affectée

Ce paragraphe est rose et aligné au centre.

La sortie du code ci-dessus est:





Cette rubrique n'est pas affectée

qu'est-ce que le chef et la marionnette

Ce paragraphe est rose et aligné au centre.

Comme vous pouvez le voir dans la sortie, l'en-tête h2 n'est pas affecté par le style. Puisque nous avons spécifié «p.center», seul le paragraphe est affecté par le style.



Poursuivant cet article sur les sélecteurs CSS,

Sélecteur universel CSS

Ce type de sélecteur peut être considéré comme un caractère générique qui sélectionne tous les éléments de la page. Il sélectionne tous les éléments de la page, et il est spécifié par «*».

Par exemple, considérez le code ci-dessous:

* {color: darkgreen font-size: 30px}

Ceci est un test (police plus petite)

Ceci est un paragraphe.

La sortie pour le code ci-dessus est:

Bonjour le monde

Ceci est un test (police plus petite)

Ceci est un paragraphe.

Comme vous pouvez le voir dans la sortie, tous les éléments définis à l'aide du sélecteur de groupe ont la même définition de style - ils sont alignés au centre et la couleur de la police est cyan.

Cela nous amène à la fin de cet article.

Découvrez notre qui vient avec une formation en direct animée par un instructeur et une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de l'article et nous vous recontacterons.