Noen ganger trenger utviklerne å knytte noen HTML -elementer med flere klasser og deretter referere til de klassene ved å bruke klasselyster. I CSS “og” -funksjonaliteten må alle klasseselgerne i stilelementet være til stede for å bruke CSS -egenskapene på elementene. Men i CSS “eller”, Tillegg av ekstra klasseselgere kan bruke stilegenskapene riktig.

La oss forstå arbeidet med CSS “og” og “eller” i detalj.

Hvordan bruke “og” funksjonalitet i HTML/CSS?

CSS “og”Funksjonalitet fungerer på en slik måte at den bruker CSS -egenskapene på elementene når bare de nøyaktige velgerne som er tilknyttet disse elementene, blir lagt til i CSS -stilelementet. Funksjonaliteten kan brukes ved å legge til “.”Selector. Dessuten skal det ikke være noe mellomrom mellom klassens utvalgere.

Syntaks

Syntaksen ved å bruke “.”Valg er som følger:

.Klasse1.Klasse2.klasse3… …

Eksempel: legge til “.”Med CSS Class Selectors

La oss anta at vi har følgende HTML -eksempel der "

”Element assosiert med tre forskjellige klasser, jeg.e., “Klasse1”,“Klasse2”Og“Klasse3”:

CSS "og"

I ovennevnte kodebit:

• En "”Tagelement er lagt til med flere klasser,”Klasse1”,“Klasse2”Og“Klasse3”.
• Inne i Div -elementet er det et "

  ”Overskrift:

.Klasse1.Klasse2.Klasse3

tekst-align: sentrum;
Farge: blå;

I CSS -delen:

• De tre klasseselgerne blir lagt til uten noe plass mellom dem.
• Med seksjonen har vi spesifisert “Tekstalign”Og“farge”Egenskaper definert for elementet tilknyttet de tre klassene.

CSS -egenskapene vil bli brukt på elementet. Dette vil generere følgende utgang:

Nå, hvis vi legger til en annen klasse “Klasse4”I CSS -stilelementet:

.Klasse1.Klasse2.Klasse3.Klasse4

tekst-align: sentrum;
Farge: blå;

Dette vil ikke anvende egenskaper på "

”Element til tross for tilstedeværelsen av alle tre relaterte klasser i stilelementet på grunn av tillegg av en ekstra klasse:

Hvordan bruke “eller” funksjonalitet i HTML/CSS?

I CSS, “eller”Funksjoner på en slik måte at det bruker CSS -egenskapene på alle elementene som er tilknyttet hver klasse lagt til i CSS -stilelementet. Tillegg av ekstra klasseselgere vil ikke påvirke velgernes arbeid. I dette tilfellet er klasselysene separert med komma ",”I CSS.

Syntaks

Syntaksen for å bruke "eller" -funksjonaliteten er som følger:

.Klasse1, .Klasse2, .klasse3,… …

Det kan observeres at “,”Legges til mellom klassens utvalgere.

Eksempel: Legge til “,” med CSS Class Selectors

La oss bruke den samme HTML -koden:

CSS "eller"

.Klasse1, .Klasse2, .Klasse3

tekst-align: sentrum;
Farge: blå;

I CSS -stilelementet blir klasselysene lagt til separert av komma "," mellom dem.

Dette vil også anvende CSS -egenskapene som er definert i CSS -stilelementet til elementet assosiert med "Klasse1”,“Klasse2”Og“Klasse3”:

Nå, hvis vi legger til en ekstra klassevelger “Klasse4" følgende:

.Klasse1, .Klasse2, .Klasse3, .Klasse4

tekst-align: sentrum;
Farge: blå;

Dette vil bruke egenskapene til “

”Element i motsetning til CSS”og”Funksjonalitet:

Dette oppsummerer arbeidet med CSS “og” og “eller”.

Konklusjon

CSS “og”Fungerer på en slik måte at CSS -egenskapene gjelder når det nøyaktige antallet og navnene på klassen Selectors refererer til klassene til elementene er lagt til. CSS “eller”Fungerer på en slik måte at egenskaper lagt til i den gjelder elementene, selv når et enkelt klassenavn tilknyttet elementene legges til, eller også hvis noen ekstra klasseselger blir lagt til. Denne bloggen guidet om å legge til "og" og "eller" -funksjonaliteten i HTML.