Å legge ut teksten og innholdet på et nettsted med HTML-kode er bare en del av bygningen frontenden av et nettsted. En annen stor del av denne prosessen er å skape den visuelle stilen, som styres av reglene for CSS.
Når vi bygger et nytt nettsted eller gjør store layoutendringer til et eksisterende, vil vi uunngåelig at bestemte deler av nettstedet vårt skal se ut på en bestemt måte. For å gjøre dette er det viktig å forstå hvordan du bruker de forskjellige CSS kombinatorer, for eksempel CSS-etterkommervelger. Denne CSS-kombinatoren gjør det mulig for store deler av et nettsted å motta de samme stilendringene samtidig.
Hva er en CSS-etterkommervelger?
CSS-etterkommervelgeren er en av fire forskjellige CSS-kombinatorer. Når du legger til et enkelt mellomrom () mellom to velgere, vil de samme stilelementene også gjelde for den andre velgeren, gitt at etterkommerne deler samme første velger.
For å forstå en CSS-etterkommervelger, må du først forstå CSS-velgerne. Den beste måten å beskrive en velger på er at det er en CSS-operatør som identifiserer HTML-delen du prøver å utforme. Det kalles en velger fordi den "velger" hvilken bit HTML som har samme operatør som CSS-foreldrene.
Vanlige eksempler på slike operatører er:
div
Dette er en kode som definerer en del av HTML, som kan inneholde ting som avsnitt og innhold, eller:
li
som er en bestilt liste. En annen lignende tag er:
ul
Dette skaper en uordnet liste. Mer komplekse mønstre blir også referert til som selektorer. Enkelt sagt, en CSS-etterkommervelger forteller et nettsted hvordan de skal se ut når en velger er 'nestet' under en felles forfader.
Den første velgeren blir CSS-overordnet, eller 'forfedren' -velgeren, og den andre velgeren blir etterkommeren. Tenk på hvordan en filkatalog fungerer: CSS-overordnede er som en mappe som inneholder andre mapper, som kan inneholde egne mapper.
Av de fire kombinatorene er den eneste som velger alt som er nestet under en bestemt CSS-forelder, CSS-etterkommervelgeren. Det er tre andre kombinatorer.
- Barnevelgeren (‘>’ i stedet for ett mellomrom) velger bare elementer som den første velgeren refererer til i en kombinator. Hvis den første velgeren er (div) og den andre velgeren er (p), blir bare (p) valgt så lenge den har (div) som en forfader. Hvis et avsnitt opprettes under et nytt (avsnitt), selv om det er i det samme (div), holdes ikke stilreglene.
- Den tilstøtende søskenvelgeren (‘+’ i stedet for ett mellomrom) velger bare elementet som er nærmest den andre velgeren i kombinatoren. Hvis den første velgeren er (div) og den andre velgeren er (p), velges det første elementet som bruker (p), men ikke (div).
- Den generelle søskenvelgeren (‘~’ i stedet for ett mellomrom) velger hvert element unntatt de som den andre velgeren refererer til. Hvis den første velgeren er (div) og den andre velgeren er (p), velges hvert element som ikke er (p).
Hvordan ser en CSS-etterkommervelger ut?
I det følgende eksemplet på to forskjellige CSS-etterkommere som opererer side om side, er (div) den første velgeren i den første kombinatoren, mens (ul) er den første velgeren i den andre kombinator. I begge CSS-etterkommere velges, (p) som den andre velgeren.
Stilelementene er forskjellige mellom (div) og (ul), men (p) bærer tydelig trekkene til sin CSS-forelder i begge tilfeller.
Hvorfor bruke en CSS-etterkommervelger?
For å forstå viktigheten av CSS-etterkommervelgeren, er det verdifullt å først forstå CSS-nestede velgere.
Vi vil generelt at visse stilregler skal gjelde for hele nettstedet, for eksempel den spesifikke størrelsen eller skrifttypen som all tekst i avsnitt (p) bruker som standard. På samme måte kan HTML begynne å se rotete ut hvis disse stilreglene brukes for hvert enkelt avsnitt i stedet for for hele nettstedet.
Nestet CSS er mulig ved bruk av CSS-kombinatorer som CSS-etterkommervelger. Ved å "hekke" CSS under en foreldrevelger, er det mulig å fortelle et nettsted raskt og effektivt hvordan en bestemt velger skal se ut i alle scenarier som CSS-forelder er referert til.
Ved å bruke en nestet CSS-velger kan vi bruke de samme reglene for å style flere seksjoner av et nettsted på en gang, slik at vi kan klare oss med mindre arbeid og samtidig holde HTML ren og uberørt.