“Har du noen gang sett noen foreldre ignorere det ene barnet sitt mens resten leker fordi det barnet er den eldste eller noe? Dette skjer vanligvis med det eldste barnet fordi foreldrene tror at han/hun kanskje ikke trenger så mye oppmerksomhet. Hvis du gjorde det, vil ikke konseptet med første første type være vanskelig for deg å forstå. Selector fra CSS første type har blitt brukt til å bare ignorere det første barnet til en spesifikk forelder og velge resten av barneelementene til den aktuelle forelderen. Med andre ord, det må velge hvert element som ikke er foreldrelementets første etterkommer. I formatet til den første barn) komponenten vises det som en parameter. Innenfor denne artikkelen i dag vil vi lære å bruke den første første barneegenskapen til CSS.”

Eksempel 01

La oss komme i gang med det første eksemplet på denne artikkelen ved å lage et standard HTML -filformat ved hjelp av tagger. Vi har startet dette HTML -skriptet med HTML -taggen som har blitt fulgt av Head -taggen. Hodemerket definerte overskriften på vår HTML -webside. Så vi har brukt tittelkoden for å legge til navnet for denne siden. Etter avslutningen av en tittelkode har vi brukt tittelkoden i Head -taggen. Vi vil se på hodemerket etter diskusjonen på kroppen til denne HTML -siden.

Innenfor kroppskoden har vi startet den med den enkle overskriften i størrelse 1. Sammen med det har vi brukt “DL” for å opprette en beskrivelsesliste. Innenfor denne beskrivelseslisten har totalt 2 beskrivelsesspesifikasjoner blitt brukt i henhold til “DT” -merker som åpner og lukker på linje 13 og 17. Definisjonsbeskrivelsen “DD” -merker brukes til å representere elementene fra en beskrivelsesliste, i.e., på linjer 14, 15, 16, 18 og 19. Beskrivelseslisten er stengt etter å ha lagt til beskrivelseselementene. Liket på vår HTML -side er fullført. Så vi har stengt kroppskoden, jeg.e., . Nå vil vi ta en titt på stilkoden til vår manns hode -tag for å style kroppen til vår HTML -kode. Beskrivelsespesifikasjonen “DT” er stylet med skriftvekten til fet skrift, stor skriftstørrelse, serif fontfamilie og skriftstørrelse på 25px. Definisjonsbeskrivelseskodene er stylet med 4px -marginen og skriftstørrelsen på 22px.

For “DD” -merker har vi brukt "ikke" (første av typen) for å style alle dets barn bortsett fra det første umiddelbare barnet. Vi har lagt skriftstørrelsen på 18px og grensen til 3px faststoff i gulgrønn farge. Nå vil denne stylingen bare bli brukt på resten av barnetikettene til "DD" -merket uten styling av det første barnet eller medlemmet. Dette handler om stilkoden og denne HTML -siden. Så vi må lagre den og deretter utføre den med alternativet for kjøring av Visual Studio Code.

Etter å ha utført dette HTML -skriptet i Chrome -nettleseren, har vi blitt vist under utdataene fra beskrivelseslisten. Overskriften er vist uten styling, mens beskrivelseslisten har vist totalt to beskrivelser Spesifikasjoner Hovedlisteelementer, i.e., Dyr og sjødyr. Hovedbeskrivelsesspesifikasjonene er større enn resten av listeelementene som spesifisert av stilkoden. Samtidig er “DD” definisjonsbeskrivelsene blitt stylet annerledes.

Varen ved siden av nummer 1 er stylet litt større enn resten av varene. Sammen med det fikk alle gjenstandene en gulgrønn fargegrense rundt seg, men den første varen ble uendret fordi det er det første barnet, og det bør unngås i henhold til den ikke første CSS-forskyvningen som ble brukt i stilen stikkord.

Eksempel 02

La oss komme i gang med et annet eksempel på CSS, ikke en første-av-typen forskyvningsvelger, sammen med andre utvalgere for å gjøre en sammenligning. Så vi har startet denne HTML -koden med standard HTML -format på tagger, i.e., Starter fra en enkel HTML -tag, etterfulgt av hodet og kroppskoden. Vi vil se på den viktigste kroppsdelen av dette HTML -skriptet gjennom Body -taggen, i.e., . Det starter med bruken av overskriftskoden

av den største størrelsen, og den lukkes

med litt tekst i begge tagger.

Etter det inneholder den en "div" -seksjon for å lage en ny beholder i HTML -kroppsområdet med klassen "overordnet" spesifisert som skal brukes til styling. Denne DIV -beholderen ville ha noen avsnitt og overskrifter i den. Overskriften på denne beholderen ville være av størrelse 1, og begynne med

og slutter med

. Etter dette inneholder den totalt 4 avsnitt i den med bruken av starten

Tag og slutt

stikkord. Etter at alle avsnittene er fullført og lukket, har vi brukt taggen for å lukke beholderen for ytterligere innsetting av elementer her. Liket av denne HTML -taggen er fullført her, da den har brukt taggen for å lukke kroppsdelen. La oss ta en titt på overskriften på denne HTML -siden ved å legge til tittelen på denne siden ved hjelp av en "tittel" -kode i "Head" hovedtaggen til HTML. Etter dette har vi brukt "stil" -merket til HTML CSS for å legge litt styling til kroppen på HTML -siden vår. Så det har blitt startet med klassen "foreldre" og velgeren "førstebarn" for å legge styling til det første barnet til det spesielle elementet "div" som er spesifisert med klassen "foreldre".

Nå vil overskriften på denne "div" -beholderen være farget blå med fontstilen skrå og fontfamilie av kursiv. Vi har brukt avsnitts-taggen "P" med den første valget av type for å legge til styling til første avsnitt fra resten av avsnittet. Den vil inneholde en bakgrunn av blankere mandler og en skriftstørrelse på 2.25em. Nå brukes den samme foreldreklassen med "Not (: First-of-type)" -velgeren for å style alle samme type barneelementer, i.e., “P” bortsett fra det første barnet til “Div” -beholderen. Alle disse elementene ville være havgrønne med større skriftstørrelser og forskjellige skriftfamilier.

Last-Child Selector har også blitt brukt til å style det siste barnet til "Div" -delen, som også er et avsnitt. Det vil være farget oransje med en normal skriftstil og en annen skriftfamilie. Stylingen er fullført her. Nå skal vi utføre det for å se endringene.

Utgangen viser ingen styling for første overskrift, skrå stylet blåfarget første overskrift av "div" -beholderen, det første avsnittet vil bli stylet med den lysrosa bakgrunnen, de neste to avsnittene er farget med havgrønn farge, og det siste avsnittet er farget oransje.

Konklusjon

Denne artikkelen inneholder en kort forklaring av CSS-velgeren, ikke første av typen. For dette har vi diskutert bruken av bruken og anvendelsen på CSS -elementer i innledende avsnitt. Etter det implementerte vi det innenfor noen eksempler på HTML -skript for å vise dets arbeid. Sammen med det har vi også dekket dens sammenligning med noen søskenvelgere for å gjøre det mer tydelig og fremtredende.