Rôzne způsoby výberu HTML v CSS
Preskúmanie rôznych CSS selektorov na výber HTML elementu - od základných po úplne nepoužiteľné. Niektoré sú užitočné, mnohé nie sú. Na konci je vtáčik!
Temani Afif nedávno urobil toto cvičenie a myslel som si, že na to nadviažem. Niektoré z týchto sú užitočné. Mnohé nie sú. Na konci je vtáčik!
html
html { /* No, je jasné */
}:root
:root { /* Sarsaparilla, niekto? */
}:root je CSS pseudo-trieda, ktorá zodpovedá koreňovému elementu aktuálneho (XML) dokumentu. Ak je aktuálny dokument HTML dokument, potom zodpovedá <html>. XML dokumenty, s ktorými sa ako webový vývojár najpravdepodobnejšie stretnete (okrem HTML) sú:
- SVG dokumenty:
:rootzodpovedá<svg> - RSS dokumenty:
:rootzodpovedá<rss> - Atom dokumenty:
:rootzodpovedá<feed> - MathML dokumenty:
:rootzodpovedá<math> - Iné XML dokumenty:
:rootzodpovedá najvonkajšiemu elementu (napr.<note>)
Ale aká je praktickosť :root? No, špecifickosť pseudo-tried (0-1-0) je vyššia než špecifickosť elementov (0-0-1), takže je menej pravdepodobné, že narazíte na konflikty s :root.
Je zvykom deklarovať globálne vlastné vlastnosti na :root, ale ja v skutočnosti uprednostňujem :scope, pretože sémanticky zodpovedá globálnemu rozsahu. V praxi to však nehrá žiadnu rolu.
/* Globálne premenné */
:root { --color: black; }
:scope { --color: black; }Porozprávajme sa o :scope viac...
:scope alebo &
:scope { /* Vložte rozšírenie rozsahu sem */
}Dobre, to nie je naozaj to, na čo je :scope.
Ako som spomenul, :scope zodpovedá koreňu globálneho rozsahu (<html>). To je však pravda iba vtedy, keď sa nepoužíva vnútri nového baseline @scope at-pravidla, ktoré sa používa na definovanie vlastného koreňa rozsahu.
Môžeme tiež urobiť toto:
& { /* A...? */
}Normálne sa selektor & používa s CSS vnorením na zreťazenie aktuálneho selektora s obsahujúcim selektorom, čo nám umožňuje vnárať selektory aj vtedy, keď sa technicky nezaoberáme vnoreními selektormi. Napríklad:
element:hover { /* Toto */
} element { &:hover { /* Sa stane týmto (všimnite si &) */ }
} element { :hover { /* Pretože toto (bez &) */ }
} element :hover { /* Znamená toto (všimnite si medzeru pred :hover) */
} element { :hover & { /* Znamená :hover element, ale to už odbočujem */ }
}Keď & nie je vnorené, jednoducho vyberá koreň rozsahu, ktorý mimo bloku @scope je <html>. Kto by to vedel?
:has(head) alebo :has(body)
:has(head) { /* Pekné! */
} :has(body) { /* Ešte lepšie! */
}<html> elementy by mali obsahovať iba <head> a <body> (à la Anakin Skywalker) ako priame deti. Akékoľvek iné značkovanie vložené sem je neplatné, hoci parsery to zvyčajne presunú do <head> alebo <body> tak či tak. Čo je dôležitejšie, žiadny iný element nemôže obsahovať <head> alebo <body>, takže keď povieme :has(head) alebo :has(body), môže sa to týkať iba elementu <html>, pokiaľ omylom nevložíte <head> alebo <body> dovnútra <head> alebo <body>. Ale prečo by ste to robili? To je jednoducho nechutné.
Je :has(head) alebo :has(body) praktické? Nie. Ale idem propagovať :has() a tiež ste sa dozvedeli o nedovolených veciach, ktoré by ste nemali robiť s HTML telami.
:not(* *)
:not(* *) { /* (* *) sú moje hviezdne oči pozerajúce na CSS <3 */
}Akýkoľvek element, ktorý je obsiahnutý iným elementom (* *)? Áno, :not() to. Jediný element, ktorý nie je obsiahnutý iným elementom, je element <html>. * sa mimochodom nazýva univerzálny selektor.
A ak vložíte kombinátor potomka rovno do stredu nich, dostanete roztomilého vtáčika:
:not(*> *) { /* Čvirik, čvirik */
}"Siri, ulož toto do Úplne nepoužiteľné." (Ironicky, Siri neurobila nič také).