CSS Combinator Selectors | Forklart

Kombinatorer i CSS beskriver forholdet mellom visse elementer og på grunnlag av dette forholdet kan du style elementer. Dette kommer godt med når du vil style visse elementer på en gang i stedet for å styleelementer hver for seg. For eksempel kan du style alle de generelle søsknene til et element ved hjelp av CSS General Sibling Combinator Selector. CSS Combinator Selectors er som følger.

1. Etterkommervelger
2. Barnvelger
3. Tilstøtende søskenvelger
4. Generell søskenvelger

Alle disse er forklart i dybden her.

Etterkommervelger

For å velge alle etterfølgere av et element, brukes etterkommervelgeren. Etterfølgere inkluderer alle barna til et element, kan det være et direkte barn eller et barn flere nivåer nedover DOM -treet. Det er representert ved hjelp av et mellomrom mellom foreldre- og barneelementet.

Syntaks

foreldrebarn
Eiendomsverdi;

Eksempel

Eksemplet nedenfor viser arbeidet med etterkommervelgeren.

Html

Jeg er en etterfølger av Div.

Jeg er også en etterfølger av div.

Jeg er ikke en etterfølger av div.

I ovennevnte HTML -kode har vi laget et element og nestet to

elementer inne i den diven. Foruten dette har vi også laget en

element utenfor elementet.

CSS

div
polstring: 5px;
Grense: 2px solid svart;

div p
bakgrunnsfarge: rosa;

Her gir vi først litt polstring og kant til Div og etterpå ved å bruke etterkommer -kombinatoren blir en rosa bakgrunnsfarge gitt til all etterkommeren

elementer i div.

Produksjon

Etterfølgerne til elementet er fremhevet i rosa.

Barnvelger

Som navnet antyder, velger Child Combinator alle barn av et element. Det er forskjellig fra etterkommervelgeren på en måte som den bare velger de direkte barna til et element. Videre er det representert med et større enn (>) tegn.

Syntaks

foreldre> barn
Eiendomsverdi;

Eksempel

Vi kommer til å bruke et eksempel som ligner på det ovenfor for å demonstrere arbeidet med Child Combinator -velgeren.

Html

Dette er et øyeblikkelig barn.

Dette er også et øyeblikkelig barn.

Siden jeg er til stede inne i seksjonselementet, er jeg derfor en etterkommer av div, men ikke et direkte barn.

Jeg er ikke et barn.

Jeg er heller ikke et barn.

Her har vi laget en div og nestet to

elementer og et element inne i div. Taggen hekker videre a

element. Foruten disse to til

elementer genereres, men utenfor div.

CSS

div
polstring: 5px;
Grense: 2px solid svart;

div> p
Bakgrunnsfarge: Hotpink;

Vi bruker barnekombinatoren for å gi en hotpink -farge til direkte

Barn av div, dessuten har vi gitt litt polstring og grense til Div.

Produksjon

Child Combinator Selector fungerer som den skal.

Tilstøtende søskenvelger

Denne velgeren brukes til å style de tilstøtende søsknene. Det er representert ved å bruke et pluss (+) tegn mellom de to elementene.

Syntaks

element + element
Eiendomsverdi;

Eksempel

Anta at du vil style a

element som er et tilstøtende søsken av elementet.

Html

Jeg er et øyeblikkelig barn.

Jeg er også et øyeblikkelig barn.

Jeg er et tilstøtende søsken.

Jeg er ikke et tilstøtende søsken.

For å demonstrere arbeidet med den tilstøtende søskenkombinatoren opprettet vi noen

elementer i og utenfor et element.

CSS

div
polstring: 5px;
Grense: 2px solid svart;

div + p
Farge: lilla;
Font-stil: kursiv;
Fontvekt: fet;

Ved å bruke den tilstøtende søskenvelgeren gir vi lilla farge, kursiv fontstil og fet skriftvekt til den tilstøtende

søsken av diven.

Produksjon

Den tilstøtende søsken av Div -elementet ble stylet ved bruk av den tilstøtende søskenkombinatoren.

Generell søskenvelger

Som navnet antyder, stiler denne CSS -kombinatoren alle søsknene til et element som deler samme foreldre. Det representert med et Tilde (~) -tegn.

Syntaks

element ~ element
Eiendomsverdi;

Eksempel

Vi skal bruke eksemplet som brukes i delen ovenfor for å se hvordan denne kombinatoren fungerer.

CSS

div ~ p
Farge: lilla;
Font-stil: kursiv;
Fontvekt: fet;

Ved å bruke den generelle søskenvelgeren gir vi litt stil til alle

søsken av Div -elementet.

Produksjon

Alle de generelle søsknene til Div -elementet ble stylet med hell.

Konklusjon

En CSS Combinator -velger velger elementer på Baiss of deres forhold til andre elementer. Det er fire kombinator -velgere i CSS. EN Etterkommervelger stiler alle etterfølgere av et element, a Barnvelger stiler de direkte barna til et element, en Tilstøtende søsken velger stiler søsknene til et element som kommer rett etter det elementet, og en Generell søskenvelger stiler alle søsknene til et element. Dette innlegget beskriver disse kombinatorene i detalj sammen med passende eksempler.