CSS s'applique à tous les enfants

Nous pouvons sélectionner tous les enfants d'un parent particulier, puis appliquer le style à tous les enfants de CSS. Nous avons un sélecteur d'enfants en CSS pour sélectionner et appliquer un style à tous les enfants. Le sélecteur d'enfants est également connu sous le nom de sélecteur «élément élément». Tout élément présent à l'intérieur de la classe parent est sélectionné comme un enfant de ce parent. Nous pouvons changer le style de tous les enfants en utilisant les propriétés CSS.

Dans ce guide, nous apprendrons à appliquer le style à tous les enfants de CSS et à utiliser quelques exemples pour comprendre ce concept en détail.

Syntaxe:

élément> élément

Il sélectionnera tous les enfants du parent particulier.

div. classe> *
// Propriétés du CSS

Il sélectionnera les enfants récursivement.

Exemple n ° 1: Sélection de tous les enfants

Tout d'abord, nous créons le fichier html. Ensuite, nous créons des classes «div» et «span» et écrivons des paragraphes à l'intérieur de ces classes. Nous utilisons le sélecteur d'enfants dans CSS et ajoutons un peu de style afin qu'il sélectionne et applique ce style à tous les enfants. Dans ce guide, nous utilisons le code Visual Studio pour la démonstration de ces exemples. Nous créons ce fichier HTML dans ce logiciel et tapons le code HTML. Vous devez taper le code suivant. Le ".L'extension de fichier html »est utilisée pour enregistrer ce fichier.

Ici, nous avons une balise «». Dans cette balise «», nous avons deux paragraphes utilisant le «

". Ensuite, vient une balise «». Nous avons un paragraphe à l'intérieur de cette balise. Après la clôture de «», nous avons également deux autres paragraphes où nous fermons la balise «». En dehors de cette balise «div», nous écrivons un paragraphe de plus. Ces paragraphes vous aideront à comprendre le concept de sélection et d'application de tous les éléments dans CSS.

Code CSS:

Le code CSS est reflété dans l'image suivante. Nous avons lié ce fichier CSS avec notre fichier HTML. Tout le style que nous avons fait ici est appliqué au fichier HTML que nous avons créé.

Ici, nous utilisons le «div> p» qui sélectionne tous les paragraphes présents à l'intérieur du «div». Dans les accolades bouclées, nous utilisons les propriétés de style telles que la «couleur arrière-plan» qui est utilisée pour changer la couleur d'arrière-plan de tous les enfants de ce parent «div». Nous l'avons réglé comme «bleu clair». Ce fond bleu clair s'appliquera à tous les enfants. Nous changeons la «famille des polices» de tous les enfants en utilisant la propriété CSS et la définissons sur «Algérien». Cette propriété s'appliquera à tous les enfants. De plus, nous utilisons la propriété CSS «Text-Align» et alignons le texte des enfants sur le «centre».

Sortir:

Vous pouvez facilement obtenir la sortie en appuyant sur «Alt + B». Il rend votre sortie sur le navigateur. Vous pouvez facilement voir la différence comment il sélectionne tous les enfants et applique le style à ces enfants.

Ici, nous voyons qu'il sélectionne les deux premiers paragraphes ainsi que les quatrième et cinquième paragraphes et applique le style à ces paragraphes. Cela ne change pas le style des troisième et sixième paragraphes car ils ne sont pas les enfants du parent «div». Le troisième paragraphe est écrit dans la «travée», c'est pourquoi ce n'est pas l'enfant de «div». Le sixième paragraphe est écrit en dehors du «div» afin que le style ne soit pas appliqué à ce paragraphe. Le sélecteur d'enfants ne sélectionne que l'enfant du parent qui est mentionné dans le code CSS.

Exemple n ° 2: sélection de tous les enfants récursivement

Pour cet exemple, si le code HTML est le même que le code précédent, nous définissons le nom de la classe Div comme «Allchild» et utilisons ce nom dans le code CSS. Nous modifions le code CSS et sélectionnons l'enfant du parent, récursivement.

Dans cet exemple, nous modifions la couleur «arrière-plan» des enfants de l'élément de classe div. Ici, le «div.AllChilld> * "sélectionne tous les éléments de classe Div en tant qu'enfant de ce" div ". Le «*» sélectionne tous les enfants de la classe «div» nommée «Allchild». Il modifie la couleur de tous les enfants de la classe Div en «rose»

Sortir:

Voici la sortie où nous avons utilisé le «div.Sélecteur Allchild> * ”. Il sélectionne tous les enfants du parent, récursivement. Vous pouvez voir qu'il modifie la couleur d'arrière-plan de tous les éléments de la classe Div en une couleur «rose».

Exemple n ° 3: sélection de tous les enfants dans CSS

Dans ce code, nous utilisons le «» et . Dans le «», nous en avons trois «» et le paragraphe »

"À l'intérieur de ce paragraphe. Nous utilisons à nouveau le «», puis fermons ce paragraphe en utilisant «

". Nous fermons le «div» et créons une autre durée qui est présente en dehors du «div».

Code CSS:

L '«affichage» de la «Span» est défini sur «Bloquer». Nous utilisons le sélecteur d'enfants qui sélectionne tous les enfants du parent. Il est utilisé ici pour sélectionner toutes les travées de la classe DIV, car «Span» est l'enfant du parent «div». Il sélectionne tous les éléments de portée de la div, puis applique le style à toutes les portées. La couleur d'arrière-plan de toutes les portées est réglée sur «vert clair». La «taille de police» de toutes les «travées» est définie sur «35px». La «Font-Family» pour tout cela est «Gill Sans». Le «poids de police» est défini sur «Bold» et le «style» est défini sur «italique». Cela s'applique à tous les enfants.

Sortir:

Il applique le style à tous les enfants «Span» du parent «div». Comme les paragraphes 1, 2 et 4 sont écrits à l'intérieur de la «Span» dans le «div», le style de ces trois paragraphes change. Cela signifie que le sélecteur d'enfants sélectionne la portée de la div et applique le style précédent à tous ces enfants.

Exemple n ° 4: sélection de tous les enfants récursivement

Nous créons la «classe div» avec le nom «enfant». Nous avons deux portées, puis un paragraphe, et encore une durée à l'intérieur du div. Un paragraphe est écrit en dehors du div. Maintenant, nous sélectionnons les éléments de la classe div récursivement à l'aide du sélecteur CSS.

Code CSS:

L'étendue «Affichage» est «bloc». Ensuite, nous avons le «div.Sélecteur d'enfant> * ”qui sélectionne tous les éléments de la classe Div nommée« Enfant »en utilisant le« * ». Le «*» sélectionne tous les éléments enfants. La «couleur arrière-plan» ici à tous les enfants est le «saumon léger». La couleur de la police est «bleu-violet». La famille de la police que nous utilisons ici est «Times New Roman». Nous utilisons également le «poids de police» et le définissons sur «plus audacieux». La «taille de police» que nous utilisons est «25px». Maintenant, vérifiez à quoi ressemble la sortie.

Les quatre premiers paragraphes sont écrits à l'intérieur de la classe DIV «Enfant» et tout le style que nous avons utilisé dans l'exemple précédent du code CSS est appliqué ici, comme indiqué dans l'image. Il sélectionne tous les éléments enfants de la classe «enfant» de «div» et applique les styles à ces éléments.

Conclusion

Nous avons utilisé le sélecteur d'enfants dans ce guide et expliqué comment sélectionner tous les enfants de CSS. Nous avons également expliqué comment appliquer les styles à tous les enfants du parent sélectionné. Nous avons appris à sélectionner tous les enfants d'un parent sélectionné et à sélectionner tous les enfants récursivement à l'aide du sélecteur d'enfants CSS. Dans ce guide, nous avons exploré quatre exemples différents. Nous avons effectué tous les exemples et affiché ces codes et sorties dans ce guide. Nous nous attendons à ce que vous appreniez ce concept après avoir soigneusement lu ce guide et après avoir effectué ces exemples par vous-même.