Introduksjon til typer CSS-velgere
Typer CSS-velgere brukes til å velge innholdet vi vil style. Det hjelper med å velge elementer basert på deres klasse, id, type osv. En CSS-velger er en komponent i CSS-regelsettet.
Typer CSS-velgere
Det er 5 varianter av CSS-velgere som er tilgjengelige for oss. Vi skal se på følgende viktige CSS-velgere:
- CSS Universal Selector.
- CSS Element Selector.
- CSS-ID-velger.
- CSS Class Selector.
- CSS attributtvelger.
1. CSS Universal Selector
På en HTML-side avhenger innholdet av HTML-koder. Et par tagger definerer et spesifikt websideelement. Universell velger CSS velger alle elementene på en webside.
Eksempel:
* (
color: blue;
font-size: 21px;
)
Disse to kodelinjene omgitt av krøllete seler vil påvirke alle elementene som er til stede på HTML-siden. Vi erklærer en universell velger med hjelp av en stjerne i begynnelsen av krøllete stag. Universal Selector kan brukes sammen med de andre velgerne i kombinasjon.
2. CSS Element Selector
CSS Element Selector er også kjent som en Type selector. Elementvelger i CSS prøver å matche HTML-elementene som har samme navn. Derfor en velger av
- matcher alle
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- CSS intervjuspørsmål
- SASS vs SCSS
- SASS intervjuspørsmål
- Eksempler på HTML bestilt liste
- elementer dvs. alle uordnede lister på den HTML-siden.
La oss se på et eksempel for elementvelgeren.
ul (
border: solid 1px #ccc;
)
For å forstå dette bedre, la oss se på et eksempel på HTML-kode for å bruke CSS-koden som vi har skrevet over.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Demotekst
I dette eksemplet vil vi hovedsakelig finne tre elementer, nemlig
- element, taggen og en annen
- element. Siden vår CSS-kode gjelder for
- merke spesifikt, vil endringene i grensen bare gjøres for vår
- koder, og ikke for kodene. Vanligvis gjelder ikke disse endringene innholdet i
- tagger også, men i noen scenarier kan stilene gjelde de indre elementene.
3. CSS ID-velger
CSS ID-velger hjelper utvikleren med å matche IDen som er utviklet av utvikleren, til stylinginnholdet. ID Selector brukes ved hjelp av hasj-tegnet (#) før ID-navnet erklært av utvikleren. ID-velger matcher hvert HTML-element som har en ID-attributt med verdien som er den som for velgeren, uten hasj-tegnet.
Her er et eksempel:
#box (
width: 90px;
margin: 10px;
)
Denne CSS-koden kan brukes til å matche elementet som har ID-boksen, som i den følgende setningen.
Her er taggen bare et eksempel. Vi kan skrive ID-attributtet for alle HTML-tagger. ID-velgeren samsvarer med ID-attributtet i elementet og ser etter stylingen. I vårt eksempel gjelder stylingen så lenge ethvert element inneholder ID-attributtet 'boks'.
Verdien på ID-en som brukes, skal visstnok være unik. Hvis samme ID brukes for to eller flere elementer, er koden teknisk ugyldig, men stylingen til elementet vil fortsatt gjelde, og derfor unngås den samme IDen vanligvis.
Å måtte bruke en annen ID hver gang for hver HTML-side, er ganske stivt. I tillegg til å møte problemer med stivhet, står ID-velgere i CSS også overfor spørsmålet om spesifisitet.
4. CSS Class Selector
CSS Class-velgeren er en av de mest nyttige valgene av alle velgerne. Det erklæres ved å bruke en prikk etterfulgt av navnet på klassen. Dette klassnavnet er definert av koderen, som tilfellet er med ID-velgeren. Klassevalgeren søker etter hvert element som har en attributtverdi med samme navn som klassens navn, uten prikken.
Eksempel:
.square (
margin: 20px;
width: 20px;
)
Denne CSS-koden kan brukes til å matche elementet som har klassen 'firkant, som i følgende setning.
Denne stilen gjelder også for alle andre HTML-elementer som har en attributtverdi for klassen som 'firkant'. Et element med samme klasse attributtverdi hjelper oss med å gjenbruke stilene og unngå unødvendig repetisjon. I tillegg er klassevelgeren fordelaktig fordi den tillater oss å legge til flere klasser til et bestemt element. Vi kan legge til mer enn en klasse i attributtet ved å skille hver klasse med plass.
Eksempel:
Her firkantet, fet og form er tre forskjellige typer klasser.
5. CSS attributtvelger
CSS Attributtvelgeren stiler innhold i henhold til attributtet og attributtverdien nevnt i de firkantede parentesene. Det er ingen mellomrom foran den firkantede åpningen.
input(type="text") (
background-color: #fff;
width: 100px;
)
Denne CSS-koden vil være et samsvar med følgende HTML-element.
Tilsvarende, hvis verdien til attributtet 'type' endres, vil attributtvelgeren ikke samsvare med den. For eksempel vil ikke velgeren samsvare med attributtet hvis verdien av 'type' endret fra 'tekst' til 'sende'. Hvis attributtvelgeren deklareres med bare attributtet og ingen attributtverdi, vil den samsvare med alle HTML-elementene med attributtet 'type', uavhengig av om verdien er 'tekst' eller 'sende'.
Eksempel:
input(type) (
background-color: #fff;
width: 100px;
)
Vi kan også benytte oss av attributtvelgere uten spesifikasjon av en verdi utenfor de firkantede parentesene. Dette vil hjelpe oss å kun målrette attributtet, uavhengig av element. I vårt eksempel vil den målrette basert på attributtet 'type', uavhengig av elementet 'input'. CSS Selectors hjelper oss med å forenkle koden vår og gjør oss i stand til å bruke og gjenbruke den samme CSS-koden for forskjellige HTML-elementer. De hjelper oss med å style spesifikke segmenter og deler av hjemmesiden vår. De gir oss muligheten til å ensartet styling av lignende elementer på vår webside. CSS-velgere er dermed en viktig del av læringskurven til CSS.
Anbefalte artikler
Dette har vært en guide til typer CSS-velgere. Her har vi diskutert de forskjellige typene CSS-velgere med eksempel. Du kan også gå gjennom andre foreslåtte artikler for å lære mer -