CSS Tilde

I CSS er Tilde et Wase Line -symbol som er representert som "~". Det kalles også “påfølgende søsken kombinator”. Vi bruker denne tilde eller påfølgende søskenkombinatoren for å skille to sammensatte utvalgere. For å si det på en annen måte, kan vi si at Tilde -velgeren velger alle elementets søsken til det spesifiserte elementet. I denne opplæringen vil vi diskutere arbeid med Tilde -velgeren. Vi vil bruke denne Tilde -velgeren i kodene våre og vil demonstrere for deg hvordan den fungerer.

Eksempel nr. 1:

For å bruke denne Tilde -velgeren i CSS, må vi først opprette en HTML -fil først og koble denne filen med vår CSS -fil der vi vil bruke Tilde -velgeren. I dette eksemplet oppretter vi en div, og i denne diven har vi en overskrift og to avsnitt og en "HR" -kode mellom disse to avsnittene. Denne "HR" -koden brukes til å representere en tematisk pause mellom avsnittet. Nå, etter fullføringen av denne HTML -koden, skal vi flytte til CSS -filen der vi bruker denne Tilde -velgeren.

Nedenfor er CSS-koden vår, der vi styler overskriften ved å endre sin "farge" til "grønn" og samkjøre den i "sentrum" ved å bruke egenskapen "tekst-align". Vi endret også "font-family" og satte den til "Algerie". Etter å ha stylet overskriften, bruker vi Tilde -velgeren. Det første elementet er "HR" og det andre er "P". Vi bruker denne Tilde -velgeren for å velge alle avsnitt som er gitt av "HR" og deretter bruke noen stylingegenskaper på disse avsnittene. Vi justerer teksten for å "rettferdiggjøre" og angi fargen på bakgrunnen ved å bruke "bakgrunnsfarget" egenskapen og bruke "pulverblått" for dette. Egenskapen "fontstørrelse" brukes også og gir verdien av "120%" til denne eiendommen. Deretter blir "Algerie" valgt som "Font-Family". Alle disse egenskapene vil gjelde for avsnittene som er gitt av "HR".

Se på utdataene nedenfor, alle egenskapene vi har brukt ovenfor i CSS -filen, brukes bare på avsnittet som er gitt av "HR". Ovennevnte avsnitt forblir uendret, men andre ledd etter at "HR" er endret og all styling brukes på dette avsnittet. Dette er bare på grunn av Tilde -velgeren.

Eksempel 2:

Her satte vi en div. I denne diven legger vi to avsnitt og en overskrift. Etter dette plasserer vi en annen div i denne første diven og setter et avsnitt og lukker denne andre diven. Utenfor den andre diven legger vi et nytt avsnitt og overskrifter. Deretter lukke den første diven her. Etter å ha stengt den første diven, legg igjen to avsnitt. Og lukk deretter kroppskoden.

Her setter vi Tilde -velgeren og plasserer “P” som det første elementet og også “P” som det andre elementet og skriver det som “P ~ P”. Det betyr at den første “P” er foran den andre “P”. Den vil velge alle “P” som blir fulgt av den første “P”. Alle de andre “P” som blir fulgt av den første “P” er stylet deretter. Vi bruker "farge" -egenskapen som setter fargen på skriften til avsnittet og satt til "svart". Størrelsen på skriften vi setter her er "20px". Vi bruker det "dristige" nøkkelordet som verdien av "fontvekt". Og velge "calibri" "font-family" for dette. "Bakgrunnsfargen" vil vises i "lett koraller" fordi vi velger denne fargen her som "bakgrunnsfargen".

Du kan legge merke til i utdataene nedenfor at alle andre ledd som blir fulgt av første ledd er stylet, da vi har brukt tilde -velgeren for dette. Ved å bruke Tilde -velgeren velger vi alle andre avsnitt før første avsnitt.

Eksempel nr. 3:

I denne koden har vi en div og deretter en uordnet liste utenfor DIV. Etter å ha stengt denne listen, skriver vi et avsnitt ved hjelp av “P” -koder og oppretter deretter en andre liste under dette avsnittet. Når denne andre listen avsluttes, skriver vi en overskrift ved hjelp av "H2" -merker. Etter denne overskriften har vi en annen liste. Alle lister er uordnede lister her.

Vi bruker “P” og deretter Tilde -velgeren. Etter Tilde -velgeren har vi “UL” som betyr at den velger alle “UL” som er gitt av “P”. Vi bruker noen stylingegenskaper for å gi stilen til "UL" for å gjøre forskjellen klar for deg hvordan denne tilde velger elementer og bruker den gitte stylingen på de valgte elementene. Vi bruker først "farge" -egenskapen og setter "grønn" for tekstfargen. Så de utvalgte elementene vil gjengi i en "grønn" farge. Vi øker også "fontstørrelsen" til "22px" og setter "font-family" til "Algerie". Vi setter "bakgrunnsfargen" i RGB-form og setter den som "RGB (235, 235, 125)" som ser ut som gul farge.

Her viser utdataene at den første listen er enkel, og det er ingen endring i den første listen den er ikke valgt, da den er til stede før avsnittet og ikke er gitt av "P". De to andre listene er stylet ettersom begge listene er gitt av "P". Disse to listene er til stede etter avsnittet, så de blir valgt og deretter stylet.

Eksempel 4:

Du kan se her vi har laget en div og en overskrift innen dette. Deretter to avsnitt utenfor denne diven. Under dette har vi en div til og går på samme måte som ovenfor og opprettet to avsnitt.

Vi bruker "div" som den første velgeren og deretter Tilde og deretter "P" som den andre velgeren. Det vil ta alle avsnittene som blir fulgt av Div. "Bakgrunnen" vi setter her er "RGB (111, 212, 111)", som er en lys grønn farge. Vi bruker "blå" som "fargen" slik at teksten vises "blå". Vi justerer det også til "sentrum" av linjen. Og "Georgia" er dens "font-familie" som vi har valgt her. Vi "fet" denne teksten ved å bruke "fet" som verdien av "fontvekt". "Font-size" er "25px" denne gangen, og den er også "kursiv" i "Font-stil".

Alle avsnitt er valgt i utdataene fordi alle avsnitt er gitt av Div . Så den velger alle avsnitt, og vi kan se at alle egenskapene vi har brukt blir brukt på disse avsnittene. Tilde -velgeren hjelper til med å velge alle avsnitt som blir fulgt av DIV og anvende egenskaper i de krøllete seler i dette.

Konklusjon:

Vi har presentert denne opplæringen for å lære Tilde -velgeren i CSS. Her har vi diskutert hva som er Tilde -velgeren og hvordan du bruker denne Tilde -velgeren i CSS og hvordan den fungerer. Vi har plassert den første velgeren og deretter Tilde -velgeren og deretter den andre velgeren. Som vi har forklart at den velger den andre velgeren som blir fulgt av den første velgeren ved hjelp av tilde -velgeren. Vi har demonstrert flere eksempler her i denne opplæringen.