Hvordan velge et HTML -element i CSS

For å forbedre utseendet til websider skrevet i HTML eller XML, bruker nettprogrammerere CSS -regler for å forskjønne websider. CSS -syntaks gir et bredt spekter av velgere For å velge HTML -elementer. Å velge HTML -elementer ved hjelp av CSS -velgere vil tillate programmereren å forbedre sine nettsteder. I denne opplæringen skal vi lære en haug med CSS -velgere som vi kan velge HTML -elementer.

CSS -velgere

En velger er en grunnleggende CSS -regel. Disse velgerne informerer nettleseren om å velge bestemte HTML -elementer og style dem på den angitte måten.

Syntaks:

H2
tekst-align: sentrum;
Farge: Aqua;

P
Font-størrelse: 12px;
Farge: blå;

Som allerede nevnt er det en rekke velgere levert av CSS som er.

1. Grunnleggende velgere
2. Attributtvelger
3. Combinator Selectors
4. Type velger
5. Pseudoklasse-utvalgere
6. Pseudo-elementer velger

La oss lære om dem i detalj.

Grunnleggende velgere

Denne kategorien av velgere består av noen primære CSS -velgere.

Elementvelger

En elementvelger brukes til å velge HTML -elementer på basis. For eksempel,

H2
tekst-align: sentrum;
Farge: blå;

I eksemplet ovenfor velger elementvelgeren

element og setter fargen til blå, og justerer teksten inn i midten av siden/beholderen.

ID -velger

Siden hvert element kan ha en unik ID slik at denne velgeren retter seg mot den IDen for å velge elementet og tilordne verdier til dens egenskaper. For å velge et HTML -element ved hjelp av ID -en, bruker vi et hasj (#) -symbol etterfulgt av ID.

I det følgende eksemplet velger ID -velgeren et element med ID = “Head1” og justerer innretting til venstre mens farge til Aqua.

#head1
Tekstalign: Venstre;
Farge: Aqua;

Klassevelger

Klasselektorstiler et HTML -element på grunnlag av en spesifikk klasseattributt. For å velge et HTML -element ved hjelp av klassenavnet, bruker vi en prikk etterfulgt av et klassenavn.

.hoved
Tekstalign: Venstre;
Margin-top: 3px;
Margin-Bottom: 3px;

Universell velger

For å velge alle elementer på en HTML -side bruker vi en universell velger. Det er representert med et stjerne -tegn (*).

*
Farge: beige;
Tekstalign: Justify;

Gruppering av velgeren

For å velge alle de elementene du vil velge på lignende måte, bruk grupperingsvelgeren.

H1, H2, P
farge svart;
tekst-align: sentrum;
Font-Family: 'Times New Roman', Times, Serif;

Attributtvelger

En attributtvelger bruker spesifikke attributtnavn for å velge HTML -elementer.

et mål]
Farge: grønn;
tekst-align: sentrum;

I eksemplet over. Attributtvelgeren er videre delt inn i forskjellige kategorier. Tabellen nedenfor forklarer dem.

Attributt velgere	Beskrivelse	Eksempel
[attributt = "verdi"]	Den velger elementer som har en bestemt attributt og verdi.	div [lang = fr] bakgrunnsfarge = rød;
[attributt ~ = “Verdi”]	Den velger elementer som har et bestemt ord i attributtverdien.	IMG [tittel ~ = “Flower”] Border: 2px Solid Blue
[attributt | = “Verdi”]	Den velger et element med en bestemt attributt hvis verdi kan være nøyaktig den spesielle verdien eller den spesielle verdien som kommer etter bindestrek (-).	p [lang | = en] font-size: 12px;
[Attribut^= “Verdi”]	Den velger elementer med attributter med verdier som starter med en bestemt verdi.	a [klasse^= “topp”] bakgrunnsfarge: rosa;
[Attributt $ = “Verdi”]	Den velger elementer med attributter som har en spesifikk sluttverdi.	IMG [src $ = hund.jpg] Border: 2px; solid gul
[attributt*= “Verdi”]	Den velger et element med attributtverdi med en bestemt verdi.	a [href*= “eksempel”] farge: blå;

Combinator Selectors

For å kombinere en eller flere typer grunnleggende CSS -velgere bruker vi en kombinatorvelger. Det er fire typer kombinatorvelgere som er;

Combinator Selectors	Beskrivelse	Eksempel
Etterkommer	Den velger elementer som er etterkommere av et spesifikt element.	div p Farge: blå;
Barn	Den velger de elementene som er første barn av et bestemt element.	div> p Farge: blå;
Tilstøtende søsken	Den velger et element som kommer umiddelbart etter et annet element.	div + p Farge: blå;
Generelt søsken	Den velger alle de elementene som er neste søsken av et bestemt element.	div ~ p Farge: blå;

Skriv velger

Type Selectors brukes i CSS når du vil velge alle elementer av en bestemt type i et dokument. For eksempel.

Span
bakgrunnsfarge: blå;

Pseudoklasse-utvalgere

Pseudoklasse velgerne brukes når du vil beskrive en bestemt tilstand av et element. Ulike pseudoklasser er.

Pseudoklasser	Beskrivelse	Eksempel
: lenke	Det stiler en lenke som ikke er blitt besøkt ennå.	A: lenke farge: aqua;
: Besøkt	Det stiler en lenke som allerede er besøkt.	A: Besøkt farge: grønn;
:sveve	Det stiler et element når musen svever på det.	A: Hør farge: rosa
: Acitve	Det stiler en aktiv lenke.	A: aktiv farge: blå;
:fokus	Det brukes til å style elementer med fokus.	P: Fokus bakgrunnsfarge: lilla;
:første barn	Det brukes til å style det første barnet til et spesifikt element.	P: First-Child Color: Blue;
:siste barn	Det samsvarer med alt det elementet som er det siste barnet til foreldrene.	P: Last-Child Font-size: 6px;
: lang	Det spesifiserer språket til et bestemt element.	Q: lang (eng) sitater: “-” “-”;

Pseudo-elementer velger

For å style noen spesifikke deler av et element pseudo-elementer brukes. Pseudo-elementer er som følger;

Pseudo-elementer	Beskrivelse	Eksempel
::første linje	Det brukes til å style den første linjen i en tekst.	P :: Førstelinje Font-size: 6px: Farge: rød;
::første bokstav	Det brukes til å style den første bokstaven i en tekst.	P :: Første bokstav Font-Weight: 7px; Farge: blå;
::før	Det legger til innhold før et element.	P :: før img = “Blomst.jpg ”;
::etter	Det legger til innhold etter et element.	P :: etter img = “Blomst.jpg ”;
:: markør	Det brukes til å style markører på en liste.	:: markør farge: rød; Font-vekt: 2px;
:: utvelgelse	Det brukes til å style valgt en del av et element.	:: utvelgelse bakgrunnsfarge: blå; Font-størrelse: 2px;

Konklusjon

For å velge et HTML -element i CSS, gir CSS velgere for å informere nettleseren om å velge bestemte HTML -elementer og style dem på den angitte måten. CSS gir mange utvalgere. Her har vi gitt en liste over noen: Basic Selectors, Attribute Selector, Type Selector, Combinator Selectors, Pseudo-Class Selectors, Pseudo-Elements Selectors. I denne opplæringen utforsket vi forskjellige kategorier av CSS -velgere og hvordan vi kan bruke dem.