Quando utilizamos a pseudo-classe ":not" para o h1, pelo que eu entendi ela automaticamente seleciona todos os outros titulos que não sejam h1? se for isso como ela funciona para outras tags que não são numeradas como "p" ou "li"? consigo utilizar ou essa Pseudo-classe é voltada para as tags de titulo?
Oii, André!
Sua percepção está correta: a pseudo-classe :not() funciona como um filtro de negação. Ela seleciona os elementos que não correspondem ao seletor que você coloca entre os parênteses.
:not() funciona com outras tagsA pseudo-classe :not() não é exclusiva para títulos (h1 a h6). Você pode utilizá-la com qualquer tipo de tag, classe, ID ou outros seletores. O funcionamento é sempre o mesmo: "selecione isso, exceto aquilo".
Alguns exemplos de como aplicar em outras tags que você mencionou:
Com parágrafos (p):
Imagine que você quer que todos os parágrafos tenham a cor cinza, exceto aquele que possui a classe .destaque.
p:not(.destaque) {
color: gray;
}
Com listas (li):
Se você deseja adicionar uma borda inferior em todos os itens de uma lista, menos no último item.
li:not(:last-child) {
border-bottom: 1px solid black;
}
Para que o :not() funcione da forma esperada, é importante observar alguns pontos:
h1, h2, h3, h4, h5. Quando você usa &:not(h1) dentro desse bloco (usando o aninhamento do CSS moderno ou SASS), você está dizendo: "Dentro deste grupo que acabei de listar, aplique estas regras apenas aos que não são h1".p:not(.classe-a):not(.classe-b) selecionará parágrafos que não tenham nenhuma dessas duas classes.:not()?Ele ajuda a evitar a necessidade de "sobrescrever" estilos. Sem o :not(), você teria que definir um estilo para todos e depois criar uma regra específica para o h1 "limpando" ou mudando o que foi feito, o que gera mais linhas de código e dificulta a organização.
O uso que você viu na aula é uma maneira de garantir que a hierarquia visual seja respeitada em telas menores, tratando as exceções de forma direta.
Se quiser ver em ação, pode acessar esse exemplo no codepen.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!