Temani Afif fez recentemente este exercício e pensei em construir a partir disso. Alguns deles são úteis. Muitos deles não são. Tem um pássaro no final!
html
html {
/* I mean, duh */
}:root
:root {
/* Sarsaparilla, anyone? */
}:root é uma pseudoclasse CSS que corresponde ao elemento raiz do documento (XML) atual. Se o documento atual for um documento HTML, então ele corresponde <html>. Os documentos XML que você provavelmente encontrará como desenvolvedor web (além do HTML) são:
- Documentos SVG:
:rootpartidas<svg> - Documentos RSS:
:rootpartidas<rss> - Documentos átomos:
:rootpartidas<feed> - Documentos MathML:
:rootpartidas<math> - Outros documentos XML:
:rootcorresponde ao elemento mais externo (por exemplo,<note>)
Mas qual é a praticidade de :root? Bem, a especificidade das pseudoclasses (0-1-0) é maior que a dos elementos (0-0-1), então é menos provável que você entre em conflitos com :root.
É convencional declarar propriedades personalizadas globais em :rootmas na verdade prefiro :scope porque corresponde semanticamente ao escopo global. Na prática, porém, não faz diferença.
/* Global variables */
:root { --color: black; }
:scope { --color: black; }Vamos conversar sobre :scope mais um pouco…
:scope ou &
:scope {
/* Insert scope creep here */
}Ok, isso não é realmente o que :scope é para.
Como mencionei, :scope corresponde ao global raiz do escopo (<html>). No entanto, isso só é verdade quando não é usado na nova linha de base @scope at-rule, que é usado para definir um personalizado raiz do escopo.
Também podemos fazer isso:
& {
/* And...? */
}Normalmente, o & selector é usado com aninhamento CSS para concatenar o seletor atual ao seletor que o contém, permitindo-nos aninhar seletores mesmo quando não estamos lidando tecnicamente com seletores aninhados. Por exemplo:
element:hover {
/* This */
}
element {
&:hover {
/* Becomes this (notice the &) */
}
}
element {
:hover {
/* Because this (with no &) */
}
}
element :hover {
/* Means this (notice the space before :hover) */
}
element {
:hover & {
/* Means :hover element, but I digress */
}
}Quando & não está aninhado, ele simplesmente seleciona a raiz do escopo, que fora de um @scope bloco é <html>. Quem sabia?
:has(head) ou :has(body)
:has(head) {
/* Nice! */
}
:has(body) {
/* Even better! */
}<html> elementos devem conter apenas um <head> e <body> (à la Anakin Skywalker) como filhos diretos. Qualquer outra marcação inserida aqui é inválida, embora os analisadores normalmente a movam para o <head> ou <body> de qualquer forma. Mais importante ainda, nenhum outro elemento pode conter <head> ou <body>então quando dizemos :has(head) ou :has(body)isso só pode se referir ao <html> elemento, a menos que você insira por engano <head> ou <body> dentro de <head> ou <body>. Mas por que você faria isso? Isso é simplesmente desagradável.
É :has(head) ou :has(body) prático? Não. Mas eu sou vou ligar :has()e você também aprendeu sobre coisas ilegais que não deve fazer com corpos HTML.
:not(* *)
:not(* *) {
/* (* *) are my starry eyes looking at CSS <3 */
}Qualquer elemento contido por outro elemento (* *)? Sim, :not() que. O único elemento que não está contido em outro elemento é o <html> elemento. *aliás, é chamado de seletor universal.
E se você jogar um combinador infantil bem no meio deles, você ganha um pássaro fofo:
:not(* > *) {
/* Chirp, chirp */
}“Siri, arquive isso em Completamente inútil.”(Ironicamente, Siri não fez tal coisa).
As diferentes maneiras de selecionar em CSS publicado originalmente em CSS-Tricks, que faz parte da família DigitalOcean. Você deveria receber o boletim informativo.
Deseja saber mais sobre Programação e Desenvolvimento Clique Aqui!