Quer aprender a melhorar seu código CSS? Conheça as novas pseudo-classes CSS e aprenda como otimizar seu código com os seletores is(), has() e where().
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
O CSS, ou Cascading Style Sheets, é a linguagem responsável por estilizar os elementos visuais de uma página na internet. Ele define cores, tamanhos, posicionamentos, sombras, transições, animações e muito mais!
Com o CSS, conseguimos criar estilos complexos e dinâmicos de forma eficiente e prática. Recentemente, novas pseudo-classes foram introduzidas, como is(), has() e where().
Essas pseudo-classes trazem uma série de melhorias que tornam o código CSS mais legível, otimizado e fácil de manter.
Nesta aula, vou te mostrar como essas pseudo-classes funcionam e como você pode utilizá-las em seus projetos.
Uma ferramenta muito útil para verificar a compatibilidade dessas e de outras pseudo-classes, como is, has e where, com os navegadores é o site Can I Use.
Esse site permite verificar a compatibilidade de seletores e novas funcionalidades com os navegadores. Basta você informar o nome da funcionalidade que deseja utilizar e verificar as versões dos navegadores em que ela é aceita.
Existem alguns pontos interessantes que você deve considerar ao avaliar as funcionalidades dentro desse site. O primeiro é o mais visual: sinais verdes indicam as versões dos navegadores que suportam determinada pseudo-classe CSS.
O segundo ponto diz respeito à porcentagem exibida ao lado de Global, no canto superior direito. Uma porcentagem alta (acima de 90%) indica que a maioria dos navegadores modernos já aceita essa funcionalidade.
Por fim, há a janela indicando Baseline 2023. Essa janela apresenta o “Base Available” (Linha de Base Disponível), que significa que a funcionalidade está disponível em todos os principais navegadores desde suas versões de 2023.
Vale notar que, mesmo com sinais verdes, alguns navegadores mais antigos podem não suportar as pseudo-classes ou funcionalidades que você deseja adicionar ao seu projeto.
Aproveite o Can I Use para também verificar os comentários de cada funcionalidade, que podem trazer recomendações específicas sobre como implementá-las corretamente.
No material disponível para download, você encontrará o código HTML da página que utilizaremos para visualizar a aplicação das pseudo-classes.
Dentro desse arquivo, temos a estrutura básica de um documento HTML, com uma <head> e um <body>.
Na <head>, estão as configurações gerais da página, como tipo de caractere, responsividade, título da página na aba do navegador e o link para o arquivo CSS externo, style.css, que usaremos para estilizar a página.
No <body>, temos o título principal <h1> e três seções principais, cada uma explicando resumidamente uma das pseudo-classes CSS. Dentro dessas seções, temos subtítulos <h2>, além de tags de parágrafos (<p>), imagens (<img>) e âncoras de links (<a>).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Has e Is</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Pseudo-Classes has(), is() e where()</h1> <div> <h2>Pseudo-Classe is()</h2> <p class="paragrafo"> Uma forma mais fácil e rápida para criar seletores compostos. </p> <p class="paragrafo-2"> Lembrar da "pegadinha" de especificidade quando os seletores estiverem dentro do is(). </p> <a href="https://www.hashtagtreinamentos.com" >https://www.hashtagtreinamentos.com</a > </div> <div> <h2>Pseudo-Classe where()</h2> <p class="paragrafo"> Uma forma mais fácil e rápida para criar seletores compostos. Basicamente igual ao is(). </p> <p class="paragrafo-2"> A diferença dele para o is() é que não tem a pegadinha. Ele é um seletor que "perdoa". </p> <a href="https://www.hashtagtreinamentos.com" >https://www.hashtagtreinamentos.com</a > </div> <div> <h2>Pseudo-Classe has()</h2> <p>Um dos seletores mais poderosos dentro do CSS!</p> <p> Uma forma de selecionar o elemento pai com base no que tem dentro dele. </p> <p> A tradução de "has" seria "tem/possui", logo a pseudo-classe "has" seleciona os elementos pais que possuem outros elementos dentro deles. </p> <img src="https://www.hashtagtreinamentos.com/wp-content/uploads/2022/05/Logo-Hashtag-Original-100x45px.png" alt="Logo da Hashtag" /> </div> </body> </html>
No arquivo CSS, inicialmente iremos apenas definir a fonte para os elementos dentro do <body> da nossa página.
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}Com isso, podemos visualizar a nossa página inicialmente da seguinte forma:
Entenda mais sobre a estrutura das páginas HTML em: Aprenda HTML Semântico – Impulsione o seu SEO
Antes de entender o uso das pseudo-classes is() e where(), é importante compreender o que são os seletores compostos no CSS.
Um seletor composto combina dois ou mais seletores simples para aplicar estilos a elementos que atendem a múltiplas condições, tornando o código mais específico e preciso.
Por exemplo, o seletor div p.paragrafo seleciona apenas os elementos <p> que possuem a classe .paragrafo e que estão dentro de uma tag <div>.
div p.paragrafo {
color: red;
}Neste caso, o estilo será aplicado apenas aos elementos <p> que atendem a todas essas condições, tornando o texto vermelho.
Você pode combinar diversos seletores simples como classes, IDs, tags e pseudo-classes. Isso fornece maior controle sobre quais elementos são afetados pelas regras CSS.
As pseudo-classes is() e where() simplificam e agilizam a escrita de seletores compostos.
Ambas permitem selecionar múltiplos elementos de maneira mais direta e eficiente, mas diferem na forma como lidam com a especificidade.
A pseudo-classe is() aplica a especificidade do seletor mais específico dentro de sua lista a todos os elementos selecionados.
Já o where() não adiciona nenhuma especificidade adicional aos seletores, sendo um “forgiving selector” (seletor permissivo).
Isso significa que é o where() é ideal para casos em que queremos aplicar estilos sem alterar significativamente a hierarquia de especificidade existente.
Imagine que você queira aplicar o mesmo estilo a diferentes elementos que compõem as seções explicativas da sua página. Usando seletores compostos tradicionais, seria necessário escrever o código assim:
div p.paragrafo,
div p.paragrafo-2,
div a {
color: red;
}Com o uso da pseudo-classe is(), podemos simplificar a escrita desta forma:
div :is(p.paragrafo, p.paragrafo-2, a) {
color: red;
}Neste exemplo, a regra de estilo é aplicada a qualquer parágrafo <p> com a classe .paragrafo ou .paragrafo-2, além de qualquer link <a> que esteja dentro da <div>.
Aqui, é importante entender como a pseudo-classe is() trata a especificidade.
No CSS, especificidade é o conjunto de regras que o CSS utiliza para determinar quais estilos aplicar quando múltiplos seletores correspondem ao mesmo elemento. A ordem de especificidade segue o padrão:
O que a pseudo-classe is() faz é aplicar a regra de especificidade do seletor mais específico dentro de sua lista.
Ou seja, se um seletor de ID estiver dentro de is(), todos os seletores naquela lista herdarão essa mesma especificidade.
Por exemplo:
div :is(p.paragrafo, p.paragrafo-2, a) {
color: red;
}
a {
color: blue;
}Mesmo que o seletor a tenha uma regra própria (color: blue;), a regra dentro da pseudo-classe is() prevalecerá, aplicando o estilo color: red; ao <a> dentro da <div>.
Isso ocorre porque a especificidade da regra em is() é determinada pelos seletores de classe (.paragrafo, .paragrafo-2), que são mais específicos do que o seletor de elemento a sozinho.
Perceba que, mesmo tentando sobrescrever a regra aplicada ao elemento <a>, a regra dentro da pseudo-classe is() é mantida.
A pseudo-classe where() funciona de maneira semelhante à is(), permitindo selecionar múltiplos elementos de forma simplificada.
No entanto, where() não adiciona especificidade, o que a torna ideal quando você deseja aplicar estilos sem alterar a hierarquia de especificidade já existente.
Isso significa que, ao usar where(), as regras CSS aplicadas aos elementos dentro dessa pseudo-classe não competirão com outras regras que possuam maior especificidade.
Dessa forma, where() é um seletor permissivo, perfeito para aplicar estilos globais ou genéricos, sem modificar a ordem de prioridade no CSS.
a:is(:link, :visited, :hover, :active) {
color: green;
}
:where(p.paragrafo, p.paragrafo-2, a) {
color: red;
}Na primeira regra, a:is(:link, :visited, :hover, :active), a especificidade é influenciada pelos seletores de pseudo-classes (:link, :visited, etc.), aplicando a cor verde aos links <a> com base no seletor mais específico.
Na segunda regra, com :where(), nenhuma especificidade adicional é aplicada aos seletores p.paragrafo, p.paragrafo-2 ou a. Isso significa que, se houver outra regra com maior especificidade, ela prevalecerá sobre a regra de where().
Por exemplo, a tag <a> está recebendo a cor vermelha dentro de :where(), mas como temos a regra com is() aplicando a cor verde, esta será priorizada.
A pseudo-classe has() é uma adição poderosa ao CSS que permite selecionar elementos com base no conteúdo de seus elementos filhos.
Em outras palavras, você pode aplicar estilos a um elemento pai que contenha determinados elementos filhos específicos.
Com o seletor :has(), é possível formatar um elemento pai dependendo da presença de elementos filhos específicos. Por exemplo, você pode alterar a cor de fundo de uma <div> se ela contiver uma imagem (<img>) dentro:
div:has(img) {
background-color: brown;
}
Esse estilo aplicará a cor marrom a qualquer <div> que contenha uma imagem em seu interior.
As novas pseudo-classes has(), is(), e where() representam um avanço significativo na construção e aplicação de códigos CSS, permitindo seleções mais dinâmicas e eficientes dos elementos.
Nesta aula, você aprendeu como e quando usar cada uma dessas pseudo-classes, respeitando as regras de especificidade, resultando em um código mais legível, flexível e de fácil manutenção.
Recomendo que você faça testes e explore essas pseudo-classes em seus projetos para aproveitar ao máximo as novas possibilidades que elas oferecem. E se você quiser aprender mais sobre HTML e CSS, conheça nosso Curso Completo HTML e CSS Impressionador.
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
Posts mais recentes da Hashtag Treinamentos
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.