Descendant - CSS-trucs

Anonim

Een afstammende selector in CSS is elke selector met witruimte tussen twee selectors zonder combinator. Hier zijn enkele voorbeelden:

ul li ( ) header h2 ( ) footer a ( ) .module div ( ) #info-toggle span ( ) div dl dt a ( )

Neem ul li ( )bijvoorbeeld. Het betekent 'elk lijstitem dat afstamt van een ongeordende lijst'.

Descendant betekent overal genest in de DOM-structuur. Het kan een direct kind zijn, het kan vijf niveaus diep zijn, het is nog steeds een afstammeling. Dit is anders dan een onderliggende combinator (>) die vereist dat het element het eerstvolgende geneste niveau lager is.

Om te illustreren, div span ( )komt overeen met:

 I will match
  • I will match too

U hoeft zich er waarschijnlijk niet veel zorgen over te maken, maar de decedent selector is behoorlijk "duur" - wat betekent dat het moeilijk / langzaam is voor rendering engines om erachter te komen en dingen mee te doen. MDN:

De afstammende selector is de duurste selector in CSS. Het is vreselijk duur, vooral als de selector in de categorie Tag of Universal is.

Maar alleen in vergelijking met andere selectors. Het is nog steeds razendsnel en je zult het waarschijnlijk nooit merken, tenzij je gek wordt.

Browser-ondersteuning

Chrome Safari Firefox Opera D.W.Z Android iOS
Ieder Ieder Ieder Ieder Ieder Ieder Ieder