I CSS er det forskjellige egenskaper som brukes der noen egenskaper er universelle, og noen brukes på forskjellige utvalgere. Imidlertid, hvis brukere vil style elementene basert på deres posisjon i en gruppe, for eksempel jevn eller merkelig posisjon, CSS ": nth-child ()”Selector brukes som definerer om elementet er jevnt eller rart.

Dette innlegget vil forklare metoden for å style de jevn og rare elementene i CSS.

Hvordan style jevn og rare elementer?

Syntaksen for styling av de jevn eller rare elementene er nevnt nedenfor:

li: nth-child (odd/jevn)
CSS -eiendom

Prøv nå den gitte prosedyren for å style de jevn og rare elementene i en "div" -beholder.

Trinn 1: Sett inn overskrift

Legg til en overskrift ved hjelp av "

”Merk og sett inn teksten mellom overskriften. “

”Definerer nivået en overskrift.

Trinn 2: Lag et "div" -element

Lage en "div”Container ved hjelp av“”Element og tilordne det en“klasse”Attributt med et spesifikt navn.

Trinn 3: Legg til liste

Legg til "

”Tag for å liste opp varen:

Linuxhint Content Creators

Uenighet

HTML/CSS

JavaScript

Git

Docker

Vinduer

Produksjon

Trinn 4: Stilliste

Få tilgang til “div”Element ved bruk av tildelt klasse”.stilliste”Og bruk de nedenfor børsnoterte egenskapene:

.stilliste
Grense: 5px Solid RGB (17, 241, 241);
Margin: 50px;
polstring: 20px;

Her:

• “grense”Definerer en grense eller oversikt for et element.
• “margin”Tildeler et rom rundt den definerte grensen til elementet.
• “polstring”Angir plassen inne i grensen:

Trinn 5: Stil rare elementer

For å style de rare elementene i beholderen, får du først få tilgang til de gamle elementene ved å bruke "Li: Nth-Child (merkelig)”. “nth-child ()”Er en velger som samsvarer med hvert eneste barnelement i foreldrene, hvor“n”Kan være et tall eller nøkkelord (Odd eller jevn) element. Bruk deretter de nedenfor-børsnoterte egenskapene:

li: nth-child (odd)
Font-størrelse: 20px;
Bakgrunn: RGB (12, 189, 233);
Farge: Hvit;

Her, "skriftstørrelse”Angir størrelsen på skriften,”bakgrunn”Setter fargen på bakgrunnen og“farge”Eiendom brukes til å spesifisere fargen på teksten.

Det kan observeres at de rare elementene er blitt stylet ved å bruke CSS -egenskapene:

Trinn 7: Stil til og med elementer

For å style de jevn elementene, få tilgang til de jevn elementene ved å bruke “Li: Nth-Child (til og med)”. Bruk deretter CSS -egenskapene i henhold til din preferanse. For eksempel "skriftstørrelse”,“bakgrunn”, Og“farge" er brukt:

li: nth-child (til og med)
Font-størrelse: 20px;
Bakgrunn: RGB (167, 235, 10);
Farge: RGB (238, 15, 15);

Produksjon

Videre kan brukeren bruke CSS på både jevn og rare elementer for å style dem:

Vi har lært deg hvordan du kan style til og med rare elementer.

Konklusjon

For å style de jevn og rare elementene, lage en “”Og legg til elementer i form av en liste ved hjelp av“

" stikkord. Få tilgang til de jevn eller rare elementene ved å bruke "Li: Nth-Child ()”Og hvor“nth-child ()”Selector sammenligner hvert eneste element i et nth-barn med foreldrene. “n”Kan være et nøkkelord eller nummer, enten det er jevnt eller rart. Bruk deretter CSS -egenskaper som "skriftstørrelse”,“farge”, Og“bakgrunn”For styling. Dette innlegget har vist den enkleste metoden for å style de jevn eller rare elementene.