Het opmaken van de tekst en inhoud van een website met HTML-code is slechts één 'brok' van bouwen de voorkant van een website. Een ander groot deel van dit proces is het creëren van de visuele stijl, die wordt bepaald door: de regels van CSS.
Telkens wanneer we een nieuwe website bouwen of grote lay-outwijzigingen aanbrengen in een bestaande, willen we onvermijdelijk dat specifieke delen van onze website er op een bepaalde manier uitzien. Om dit te doen, is het belangrijk om te begrijpen hoe de verschillende CSS-combinaties, zoals de CSS descendant selector. Met deze CSS-combinator kunnen grote delen van een website in één keer dezelfde stijlwijzigingen ontvangen.
Wat is een CSS Descendant Selector?
De CSS-descendant-selector is een van de vier verschillende CSS-combinators. Bij het toevoegen van een enkele spatie ( ) tussen twee selectors, zijn dezelfde stijlelementen ook van toepassing op de tweede selector, aangezien de afstammelingen dezelfde eerste selector delen.
Om een CSS afstammelingselector te begrijpen, moet u eerst:
CSS-kiezers begrijpen. De beste manier om een selector te beschrijven, is dat het een CSS-operator is die het stukje HTML identificeert dat u probeert te stylen. Het wordt een selector genoemd omdat het elk stukje HTML "selecteert" dat dezelfde operator deelt als de CSS-ouder.Veelvoorkomende voorbeelden van dergelijke operators zijn:
div
Dit is een tag die een HTML-sectie definieert, die zaken als alinea's en inhoud kan bevatten, of:
li
dat is een geordende lijst. Een andere vergelijkbare tag is:
ul
Dit creëert een ongeordende lijst. Complexere patronen worden ook wel selectors genoemd. Simpel gezegd, een CSS descendant selector vertelt een website hoe het eruit moet zien als een selector is ‘genest’ onder een gemeenschappelijke voorouder.
De eerste selector wordt de CSS-ouder, of de 'voorouder'-selector, en de tweede selector wordt de afstammeling. Bedenk hoe een bestandsdirectory werkt: de CSS-ouder is als een map die andere mappen bevat, die hun eigen mappen kunnen bevatten.
Van de vier combinators is de enige die alles selecteert dat onder een specifieke CSS-ouder is genest, de CSS-descendant-selector. Er zijn nog drie andere combinators.
- De onderliggende selector ('>' in plaats van enkele spatie) selecteert alleen elementen waarnaar wordt verwezen door de eerste selector in een combinator. Als de eerste selector (div) is en de tweede selector (p), wordt alleen (p) geselecteerd zolang deze (div) als voorouder heeft. Als een alinea wordt gemaakt onder een nieuwe (sectie), zelfs als deze in dezelfde (div) staat, blijven de stijlregels niet behouden.
- De aangrenzende broer of zus-selector ('+' in plaats van een enkele spatie) selecteert alleen het element dat zich het dichtst bij de tweede selector in de combinator bevindt. Als de eerste selector (div) is en de tweede selector (p), wordt het eerste element dat (p) maar niet (div) gebruikt, geselecteerd.
- De algemene broer of zus-selector ('~' in plaats van een enkele spatie) selecteert elk element behalve die waarnaar wordt verwezen door de tweede selector. Als de eerste selector (div) is en de tweede selector (p), wordt elk element dat niet (p) is geselecteerd.
Hoe ziet een CSS Descendant Selector eruit?
In het volgende voorbeeld van twee verschillende CSS-afstammelingen die naast elkaar werken, is (div)) de eerste selector in de eerste combinator, terwijl (ul) de eerste selector in de tweede is combinator. In beide CSS-descendant-selectors wordt (p) gebruikt als de tweede selector.
De stijlelementen verschillen tussen (div) en (ul), maar (p) heeft in beide gevallen duidelijk de kenmerken van zijn CSS-ouder.
Waarom een CSS Descendant Selector gebruiken?
Om het belang van de CSS-descendant-selector te begrijpen, is het waardevol om eerst de geneste CSS-selectors te begrijpen.
Over het algemeen willen we dat bepaalde stijlregels van toepassing zijn op de hele website, zoals de specifieke grootte of het lettertype dat standaard in alle alineatekst (p) wordt gebruikt. Evenzo kan HTML er rommelig uitzien als die stijlregels voor elke afzonderlijke alinea worden toegepast in plaats van voor de hele website.
Geneste CSS is mogelijk door het gebruik van CSS-combinators zoals de CSS descendant selector. Door CSS te "nesten" onder een bovenliggende selector, is het mogelijk om een website snel en efficiënt te vertellen hoe een specifieke selector eruit zou moeten zien in elk scenario waarnaar de CSS-ouder wordt verwezen.
Door een geneste CSS-selector te gebruiken, kunnen we dezelfde regels toepassen om meerdere secties van een site tegelijk te stylen, waardoor we met minder werk kunnen rondkomen terwijl onze HTML schoon en onberispelijk blijft.