«Avez-vous déjà vu certains parents ignorer leur seul enfant pendant que les autres jouent parce que cet enfant est l'aîné ou quelque chose? Cela se produit généralement avec l'enfant aîné parce que les parents pensent qu'il pourrait ne pas avoir besoin d'attention. Si vous l'avez fait, le concept de non-premier type ne sera pas difficile pour vous de comprendre. Le sélecteur de type CSS premier type a été utilisé pour ignorer simplement le premier enfant d'un parent spécifique et sélectionner le reste des éléments enfants de ce parent particulier. En d'autres termes, il doit choisir chaque élément qui n'est pas le premier descendant de l'élément parent. Dans le format du premier enfant) composant, il est montré comme un paramètre. Dans cet article aujourd'hui, nous apprendrons à utiliser la propriété infantile pas d'abord de CSS."

Exemple 01

Commençons par le premier exemple de cet article en créant un format de fichier HTML standard à l'aide de balises. Nous avons commencé ce script HTML avec la balise HTML qui a été suivie par la balise de tête. Le tag de tête a défini l'en-tête de notre page Web HTML. Donc, nous utilisons la balise de titre pour ajouter le nom de cette page. Après la clôture d'une balise de titre, nous avons utilisé la balise de titre dans la balise de tête. Nous allons jeter un coup d'œil à l'étiquette de tête après la discussion sur le corps de cette page HTML.

Dans l'étiquette corporelle, nous l'avons commencé avec le titre simple de la taille 1. Parallèlement à cela, nous utilisons le «DL» pour créer une liste de description. Dans cette liste de description, un total de 2 spécifications de description ont été utilisés conformément aux étiquettes «DT» ouvrant et fermement aux lignes 13 et 17. Les balises de description de définition «DD» sont utilisées pour représenter les éléments d'une liste de description, i.e., aux lignes 14, 15, 16, 18 et 19. La liste de description a été fermée après avoir ajouté les éléments de description. Le corps de notre page HTML a été achevé. Donc, nous avons fermé l'étiquette corporelle, je.e., . Maintenant, nous allons jeter un œil à l'étiquette de style de notre étiquette de tête pour styliser le corps de notre code HTML. La spécification de description «DT» a été stylée avec le poids de la police de la taille de la police audacieuse, de la famille des polices de Serif et de la taille de la police de 25px. Les balises de description de définition sont stylisées avec la marge 4px et la taille de la police de 22px.

Pour les balises «DD», nous utilisons le décalage «pas» (premier de type) pour styliser tous ses enfants sauf le premier enfant immédiat. Nous avons ajouté la taille de la police de 18px et la bordure du solide 3px de la couleur jaune-vert. Maintenant, ce style ne serait appliqué au reste des étiquettes d'enfants de la balise «DD» sans le style de son premier enfant ou membre. Il s'agit de la balise de style et de cette page HTML. Nous devons donc l'enregistrer puis l'exécuter avec l'option d'exécution du code Visual Studio.

Après avoir exécuté ce script HTML dans le navigateur Chrome, nous nous sommes montrés ci-dessous la sortie de la liste description. Le titre a été affiché sans aucun style, tandis que la liste des description a affiché un total de deux descriptions Spécifications MAINS LIST Éléments, i.e., Animaux et animaux de mer. Les spécifications de description principales sont plus grandes que le reste des éléments de la liste, comme spécifié par la balise de style. En même temps, les descriptions de définition «DD» ont été stylisées différemment.

L'article adjacent au numéro 1 est stylé un peu plus grand que le reste des articles. Parallèlement à cela, tous les articles ont obtenu une bordure de couleur jaune-vert autour d'eux, mais le premier élément est resté inchangé parce que c'est le premier enfant, et il devrait être évité selon le décalage CSS non premier de type utilisé dans le style étiqueter.

Exemple 02

Commençons par un autre exemple de CSS, pas un sélecteur de décalage tout premier de type, ainsi que d'autres sélecteurs pour faire une comparaison. Nous avons donc commencé ce code HTML avec le format HTML standard des balises, I.e., à partir d'une étiquette HTML simple, suivie de la tête et de la balise corporelle. Nous allons jeter un coup d'œil à la partie du corps principale de ce script HTML à travers l'étiquette corporelle, je.e., . Cela commence par l'utilisation de la balise de capture

de la plus grande taille, et il ferme

avec un peu de texte dans les deux balises.

Après cela, il contient une section «div» pour créer un nouveau conteneur dans la zone du corps HTML avec la classe «parent» spécifié pour être utilisé pour le style. Ce conteneur div aurait des paragraphes et des titres. Le cap de ce conteneur serait de taille 1, en commençant par

et se terminant avec

. Après cela, il contient un total de 4 paragraphes à l'intérieur avec l'utilisation du début

Tag et fin

étiqueter. Une fois tous les paragraphes terminés et fermés, nous utilisons la balise pour fermer le conteneur pour plus d'insertion d'éléments ici. Le corps de cette balise HTML a été achevé ici car il a utilisé la balise pour fermer la partie du corps. Jetons un coup d'œil à l'en-tête de cette page HTML en ajoutant le titre à cette page à l'aide d'une balise «Title» dans la balise principale «Head» de HTML. Après cela, nous avons utilisé la balise «style» de HTML CSS pour ajouter un style au corps de notre page HTML. Ainsi, il a été lancé avec la classe «parent» et le sélecteur «premier enfant» pour ajouter du style au premier enfant de l'élément particulier «div» qui a été spécifié avec la classe «parent».

Maintenant, la rubrique de ce conteneur «div» serait colorée en bleu avec le style de police oblique et la famille de police cursive. Nous utilisons la balise de paragraphe «P» avec le premier sélecteur de type pour ajouter du style au premier paragraphe du reste des paragraphes. Il contiendrait un fond d'amandes blanches et une taille de police de 2.25EM. Maintenant, la même classe parent est utilisée avec le sélecteur «non (: premier de type)» pour styliser tout le même type d'éléments enfants, je.e., «P» sauf le premier enfant du conteneur «div». Tous ces éléments seraient le vert marin avec des tailles de police plus grandes et différentes familles de polices.

De plus, le dernier sélecteur de l'enfant a été utilisé pour coiffer le dernier enfant de la section «Div», qui est également un paragraphe. Ce sera coloré orange avec un style de police normal et une famille de polices différente. Le style est terminé ici. Maintenant, nous allons l'exécuter pour voir les changements.

La sortie ne montre aucun style pour le premier titre, le premier cap de couleur bleu de style oblique du récipient «div», le premier paragraphe serait stylisé avec le fond rose clair, les deux paragraphes suivants sont colorés de couleur verte de mer, et le dernier paragraphe est orange coloré.

Conclusion

Cet article contient une brève explication du sélecteur CSS, pas le premier de type. Pour cela, nous avons discuté de son utilisation et de son application sur les éléments CSS dans le paragraphe d'introduction. Après cela, nous l'avons implémenté dans quelques exemples de script HTML pour montrer son fonctionnement. Parallèlement à cela, nous avons également couvert sa comparaison avec certains sélecteurs de frère pour rendre son travail plus clair et plus important.