CSS uniquement

Vous avez peut-être entendu et essayé le concept d'hérédité tout en travaillant dans n'importe quel langage de programmation. L'héritage fait référence à la relation parent-enfant en général. Tout comme une autre programmation orientée objet, nous pouvons également utiliser ce concept dans les scripts HTML d'une manière un peu différente. Les attributs de décalage unique de style CSS pour n'importe quel élément peuvent être utilisés pour styliser les seuls éléments de notre corps HTML qui ne contient aucun élément de frère et avoir un parent. En d'autres termes, cet élément unique peut être conçu en fonction de la seule propriété enfant sans modifier le reste des éléments. Dans ce guide, nous allons y jeter un œil.

Exemple 01:

Nous commençons le fichier de code HTML dans le code Visual Studio avec la balise d'ouverture principale HTML suivie de l'ouverture d'une balise de tête adjacente à l'ouverture de la balise de titre. Cette balise de titre contient le titre de cette page et la balise de titre est fermée ici. Ensuite, nous avons une balise de style CSS principale et la balise corporelle pour ajouter des éléments à la page HTML avec un style. Nous devons d'abord comprendre le corps du HTML. Pour cela, nous utilisons une rubrique simple de la plus grande taille en haut de la page HTML, je.e. H1, montrant qu'il s'agit d'un exemple de décalage de classe uniquement. Ensuite, nous utilisons l'élément «div» simple pour créer une nouvelle division sur la page Web HTML suivie de sa balise enfant, i.e. étiqueter. Cette étiquette d'étiquette utilise une phrase simple.

Maintenant, l'élément "Label" est la seule balise dans la balise "div". Il serait considéré comme un décalage unique dans ce cas. Nous avons un autre élément div utilisé après cela dans la page HTML. Cet élément div contient deux autres balises ou éléments. Sa première balise est l'étiquette de span et l'autre est la balise d'étiquette; Les deux contiennent des données de texte. Étant donné que cette étiquette Div a deux enfants, pas un seul enfant ne serait considéré comme un décalage «uniquement» pour le style. Enfin, nous avons une nouvelle balise de paragraphe avec son seul étiquette. Maintenant, cette étiquette d'étiquette de l'élément de paragraphe serait également considérée comme le seul enfant de son parent et stylisé en conséquence. L'élément corporel est terminé ici.

Prenons une forme sur la conception de cette page HTML. Dans la balise CSS de style, nous utilisons l'élément «étiquette» avec le décalage de la classe «uniquement-enfant» pour appliquer certains styles à tous les éléments enfants de balises / éléments particuliers qui ne contiennent aucun autre enfant en eux. En d'autres termes, le style est appliqué aux éléments enfants qui n'ont pas de frères et sœurs. Nous utilisons l'arrière-plan de la propriété pour ajouter l'arrière-plan de couleur verte pour cet enfant en particulier. La propriété Font-Family contient plus d'une valeur pour le texte contenu par l'enfant particulier et sa taille de police est très grande. La couleur du texte des étiquettes d'enfants «étiquettes» est rose clair selon la couleur de la propriété. La balise de style à côté de l'élément d'étiquette de tête est terminée. Fermons la balise HTML après la balise corporelle et enregistrons ce code. Essayez de l'exécuter avec le navigateur Chrome pour voir la sortie pour le seul décalage de la classe.

La sortie suivante affichée montre une simple ruban. Les sections affichées dans le fond de couleur verte démontrent le seul enfant de la section «div», donc stylisé en conséquence via le seul décalage de l'enfant pour l'élément d'étiquette. La ligne après le premier élément enfant représente la deuxième section «div» avec deux enfants, une portée et un étiquette, sur la même ligne. Tandis que le deuxième enfant stylé dans le fond vert fait partie d'un élément de paragraphe.

Exemple 02:

Nous commençons ce script HTML avec le même format HTML de codes - commencez par la balise HTML suivie de la balise de tête, de la balise corporelle, de l'ouverture et de la fermeture. Le corps du HTML contient un cap de la taille 1, le plus grand cap du HTML. Nous commençons une liste commandée dans notre balise corporelle HTML. Cet élément de liste est ajouté avec la balise de liste «OL». Cette liste ordonnée contient un total de 4 éléments de liste numérotés à se trouver via l'utilisation de balises de liste «Li». La première liste numérotée contient une seule liste non ordonnée avec un seul élément de liste qui est considéré comme son seul enfant. La deuxième liste de la liste de la liste ordonnée principale contient une autre liste non ordonnée. Cette liste intérieure non ordonnée contient trois éléments de liste à l'intérieur avec l'utilisation des balises «Li». L'élément de troisième liste de la liste principale ordonnée contient un élément de liste unique avec la balise de liste intérieure non ordonnée suivie de la balise «Li».

Le dernier élément de la liste de la liste principale ordonnée contient un autre élément de liste non ordonnée, «UL». Cet élément de liste non ordonné contient un total de trois éléments de liste à l'intérieur à l'aide des balises «Li». Le principal ordonné est fermé après l'utilisation des 4 éléments de la liste principale. Le corps de notre page HTML est terminé ici.

Jetons un coup d'œil à la conception de toute cette page HTML. Nous utilisons les deux balises de mot-clé «Li» dans la balise de style pour styliser tous les éléments de liste intérieure des 4 éléments de la liste principale. La propriété de type de style liste pour ces éléments de liste intérieure est spécifiée comme un style «cercle». D'un autre côté, nous utilisons la seule classe de décalage de l'enfant pour les éléments de liste pour ajouter des styles aux seuls éléments de liste qui sont le seul enfant de leur parent respectif et n'ont pas d'autres enfants ou frère ou sœurs. Nous spécifions la couleur du texte pour ces éléments de liste d'enfants comme rouges avec des usages de la famille de police. De plus, nous utilisons le type de style de liste carré via l'utilisation du «style de liste». Le style de ce code est finalisé. Enregistrons et exécutons notre code pour voir la sortie.

La sortie de ce code affiche une seule rubrique suivie de la liste commandée de 4 éléments de liste numérotés. Les éléments de liste non ordonnés de ces éléments de liste commandés sont mis en évidence dans la couleur du texte rouge avec la balle de style de la liste carrée. Les autres éléments de la liste non ordonnés sont affichés dans le style Bullet Circle.

Conclusion

Cet article a défini la marque pour démontrer l'utilisation de la seule classe de décalage de l'enfant dans le style CSS pour styliser les seuls éléments d'une page HTML qui sont un seul enfant de leur élément parent. À cette fin, nous avons utilisé un total de 2 brefs exemples dans nos scripts HTML pour démontrer l'application de cette classe de décalage à ces éléments enfants. Le premier exemple contient l'utilisation de ce décalage à certaines sections «div» tandis que l'autre exemple l'utilise pour styliser les éléments de liste non ordonnés pour une liste numérotée.