Understanding CSS Selectors, and Pseudo Selectors
Way before we move forward , let's examine css combinator operators , a quick deep look to css operators
TIP: you can use this playground link to practice
Combinador de irmão seguinte(+)
O combinador de irmão seguinte (+) separa dois seletores e corresponde ao segundo elemento apenas se ele seguir imediatamente o primeiro elemento, e ambos são filhos do mesmo elemento pai.Exemplo: Apenas o segundo parágrafo será vermelho porque é o próximo irmão do primeiro parágrafo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p + p {
color: red;
}
</style>
</head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
<p>Terceiro parágrafo</p>
</body>
</html>Exemplo: O parágrafo imediatamente após o <h1> será exibido em negrito.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 + p {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Título</h1>
<p>Parágrafo após o título</p>
<div>
<h1>Outro título</h1>
<p>Este parágrafo não será afetado</p>
</div>
<p>Este parágrafo também não será afetado</p>
</body>
</html>Exemplo-3: Os parágrafos que seguem imediatamente os <h2> dentro do elemento com a classe .container terão um fundo cinza claro, enquanto os parágrafos fora do .container não serão afetados.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container h2 + p {
background-color: lightgray;
}
</style>
</head>
<body>
<div class="container">
<h2>Subtítulo</h2>
<p>Parágrafo após o subtítulo</p>
<h2>Outro subtítulo</h2>
<p>Outro parágrafo após o subtítulo</p>
</div>
<div>
<h2>Subtítulo fora do container</h2>
<p>Parágrafo fora do container</p>
</div>
</body>
</html>Combinador de filho (>)
O combinador de filho (>) é colocado entre dois seletores CSS. Ele corresponde apenas àqueles elementos correspondidos pelo segundo seletor que são filhos diretos dos elementos correspondidos pelo primeiro.
Exemplo-1: Apenas o primeiro parágrafo será azul porque é um filho direto do elemento div. O parágrafo dentro do div aninhado não será afetado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div > p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>Parágrafo filho direto do div</p>
<div>
<p>Parágrafo filho do div aninhado</p>
</div>
</div>
</body>
</html>Exemplo-2: Apenas os itens da lista (li) que são filhos diretos da lista (ul) dentro do .container serão exibidos em negrito. O item da lista aninhado não será afetado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container > ul > li {
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>Item da lista filho direto</li>
<li>Outro item da lista filho direto</li>
<ul>
<li>Item da lista aninhado</li>
</ul>
</ul>
</div>
</body>
</html>Exemplo-3: Apenas os elementos div com a classe .child que são filhos diretos do elemento .parent terão um fundo verde claro. Apenas os elementos div com a classe .grandchild que são filhos diretos do .child terão um fundo coral claro. O último .child não será afetado porque não é um filho direto do .parent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent > .child {
background-color: lightgreen;
}
.parent > .child > .grandchild {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Filho direto
<div class="grandchild">
Neto direto
</div>
</div>
<div class="child">
Filho direto sem neto
</div>
<div>
<div class="child">
Filho não direto
</div>
</div>
</div>
</body>
</html>Combinador de irmãos subsequentes (~)
O combinador de irmãos subsequentes (~, uma til) separa dois seletores e corresponde a todas as instâncias do segundo elemento que seguem o primeiro elemento (não necessariamente imediatamente) e compartilham o mesmo elemento pai.
No exemplo a seguir, o combinador de irmãos subsequentes (~) ajuda a selecionar e estilizar parágrafos que são irmãos de uma imagem e aparecem após qualquer imagem.
Exemplo-1:
Todos os parágrafos (p) que seguem uma imagem (img) terão o texto azul.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img ~ p {
color: blue;
}
</style>
</head>
<body>
<img src="image.jpg" alt="Imagem de exemplo">
<p>Este parágrafo será azul.</p>
<p>Este também será azul.</p>
<img src="another-image.jpg" alt="Outra imagem de exemplo">
<p>Este parágrafo também será azul porque está após uma imagem.</p>
</body>
</html>Exemplo-2:
Todos os parágrafos (p) que seguem um elemento com a classe highlight terão o fundo amarelo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.highlight ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="highlight">Destaque</div>
<p>Este parágrafo terá um fundo amarelo.</p>
<p>Este também terá um fundo amarelo.</p>
<div>Outro div</div>
<p>Este parágrafo não será afetado.</p>
</body>
</html>Exemplo-3
Todos os parágrafos (p) que seguem um título (h2) terão uma borda esquerda vermelha de 3px e um padding à esquerda de 10px.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h2 ~ p {
border-left: 3px solid red;
padding-left: 10px;
}
</style>
</head>
<body>
<h2>Título 1</h2>
<p>Parágrafo após Título 1.</p>
<p>Outro parágrafo após Título 1.</p>
<h2>Título 2</h2>
<p>Parágrafo após Título 2.</p>
<p>Outro parágrafo após Título 2.</p>
</body>
</html>Combinador de descendentes
O combinador de descendentes — tipicamente representado por um único espaço (“ “) — combina dois seletores de forma que elementos correspondentes ao segundo seletor são selecionados se tiverem um ancestral (pai, pai do pai, pai do pai do pai, etc.) que corresponda ao primeiro seletor. Seletores que utilizam um combinador de descendentes são chamados de seletores de descendentes.
Exemplo-1:
Todos os parágrafos (p) dentro de um elemento div terão o texto verde.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div p {
color: green;
}
</style>
</head>
<body>
<div>
<p>Este parágrafo dentro de um div ficará verde.</p>
</div>
<p>Este parágrafo fora de um div não será afetado.</p>
</body>
</html>Exemplo-2:
Todos os itens de lista (li) dentro de uma lista não ordenada (ul) terão o texto em negrito.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul li {
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>Item da lista em negrito.</li>
<li>Outro item da lista em negrito.</li>
</ul>
<ol>
<li>Este item de lista ordenada não será afetado.</li>
</ol>
</body>
</html>Exemplo-3:
Todos os parágrafos (p) dentro de um article, que por sua vez está dentro de um div com a classe container, terão uma margem à esquerda de 20px e o texto azul.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container article p {
margin-left: 20px;
color: blue;
}
</style>
</head>
<body>
<div class="container">
<article>
<p>Parágrafo dentro de um article, dentro de um div com classe container.</p>
</article>
</div>
<article>
<p>Parágrafo fora do div com classe container não será afetado.</p>
</article>
</body>
</html>& nesting selector
O Seletor de Aninhamento & em CSS
O seletor de aninhamento & em CSS define explicitamente a relação entre regras de pai e filho ao usar aninhamento CSS. Ele torna os seletores de regras de filhos aninhados relativos ao elemento pai. Sem o seletor de aninhamento &, o seletor de regra de filho seleciona elementos filhos. Os seletores de regra de filho têm o mesmo peso de especificidade como se estivessem dentro de :is().
Seletor de Aninhamento & e Espaços em Branco
Considere o seguinte código onde o aninhamento é feito sem o seletor de aninhamento &:
parentRule {
/* propriedades de estilo da regra pai */
childRule {
/* propriedades de estilo da regra filho */
}
}
since css now support writing nested code ,so you can do the following
body{
nav{
a{
color: red !important;
&{
color: blue !important;
}
}
}
}Quando o navegador analisa os seletores aninhados, ele adiciona automaticamente espaços em branco entre os seletores para criar uma nova regra de seletor CSS. O código a seguir mostra as regras não aninhadas equivalentes (sem aninhamento o código seria como mostra abaixo):
.parent-rule {
/* propriedades de estilo da regra pai */
}
.parent-rule .child-rule {
/* propriedades de estilo para descendentes de .child-rule de ancestrais .parent-rule */
}
body nav a {
color: red !important;
color: blue !important;
}Aqui vai um exemplo complexo ,
Desafio , complete o html desse codigo css, olhando para como foi declarado o css vc conseguiria completar o código html?:
Exercício-1: complete o html do codigo abaixo
/* Usando o seletor de aninhamento & */
.container {
background-color: lightgray;
& .item {
color: blue;
}
}
/* Regras CSS não aninhadas equivalentes */
.container {
background-color: lightgray;
}
.container .item {
color: blue;
}Exercício-2: complete o html do codigo abaixo
/* Usando o seletor de aninhamento & */
.header {
background-color: #f8f9fa;
& .logo {
font-size: 24px;
}
& .nav {
display: flex;
& a {
margin-right: 15px;
}
}
}
/* Regras CSS não aninhadas equivalentes */
.header {
background-color: #f8f9fa;
}
.header .logo {
font-size: 24px;
}
.header .nav {
display: flex;
}
.header .nav a {
margin-right: 15px;
}Exercício-3: complete o html do codigo abaixo
/* Usando o seletor de aninhamento & */
.card {
border: 1px solid #ddd;
padding: 16px;
& .title {
font-size: 20px;
font-weight: bold;
}
& .content {
margin-top: 10px;
& p {
color: #333;
}
& .highlight {
background-color: yellow;
}
}
}
/* Regras CSS não aninhadas equivalentes */
.card {
border: 1px solid #ddd;
padding: 16px;
}
.card .title {
font-size: 20px;
font-weight: bold;
}
.card .content {
margin-top: 10px;
}
.card .content p {
color: #333;
}
.card .content .highlight {
background-color: yellow;
}Aseguir os dois ultimos combinators não são muito comuns mas vale a pena realçar a saber um pouco sobre .
Separador de namespace
O separador de namespace (|) separa o seletor do namespace, identificando o namespace, ou a ausência dele, para um seletor de tipo.
before move forward let's understand what's namespace(quick explanation)
Quick intro to Namespaces
Namespaces são usados em SVG, que é um tipo de XML. Eles ajudam navegadores a entender diferentes tipos de conteúdo XML misturado em um mesmo arquivo, como SVG e MathML em um documento HTML científico.
Background
Cada tipo de XML define seus próprios elementos, e às vezes esses nomes podem ser iguais em diferentes tipos de XML. Por exemplo, tanto HTML quanto SVG têm um elemento <title>. Como o navegador sabe qual é qual? A resposta é usando namespaces.
Declarando Namespaces
Namespaces são declarados com o atributo xmlns:
<svg xmlns="http://www.w3.org/2000/svg">
<!-- mais tags aqui -->
</svg>Aqui, o namespace http://www.w3.org/2000/svg é declarado para o elemento <svg> e seus filhos.
Redecalrando o Namespace Padrão
Se precisar misturar diferentes namespaces em um documento XML, você pode redefinir o namespace em um elemento filho:
<report xmlns="https://www.acme.org/reports">
<title>Algumas estatísticas</title>
<summary>...</summary>
<statTable xmlns="https://www.acme.org/tables">
<content>...</content>
<summary xmlns="https://www.acme.org/reports">...</summary>
</statTable>
</report>Neste exemplo, o atributo xmlns no elemento raiz <report> declara o namespace padrão como https://www.acme.org/reports, ou reports. Como resultado, ele e todos os seus elementos filhos são interpretados pelo agente do usuário como pertencentes a reports, exceto pelo elemento <content>, que existe no namespace https://www.acme.org/tables, ou tables. O elemento <summary> tem seu próprio parâmetro xmlns, e ao redefinir o namespace reports, isso informa ao agente do usuário que o elemento <summary> e seus descendentes (a menos que também redefinam um namespace alternativo) pertencem a reports.
Com HTML, http://www.w3.org/1999/xhtml é o namespace implícito. Com SVG, é http://www.w3.org/2000/svg. MathML é http://www.w3.org/1998/Math/MathML.
Declarando Prefixos de Namespace
Para usar atributos de diferentes namespaces, você pode definir um prefixo:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="script.js" type="text/javascript" />
</svg>Aqui, xmlns:xlink define o namespace para o prefixo xlink, que é usado para o atributo xlink:href.
Exemplo-1:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ns|p {
color: red;
}
</style>
</head>
<body>
<ns:p>Este parágrafo em um namespace 'ns' ficará vermelho.</ns:p>
<p>Este parágrafo sem namespace não será afetado.</p>
</body>
</html>Exemplo-2:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
meuNamespace|div {
background-color: yellow;
}
</style>
</head>
<body>
<meuNamespace:div>Este div em um namespace 'meuNamespace' terá fundo amarelo.</meuNamespace:div>
<div>Este div sem namespace não será afetado.</div>
</body>
</html>Exemplo-3:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
outroNamespace|h1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<outroNamespace:h1>Este h1 em um namespace 'outroNamespace' ficará azul e centralizado.</outroNamespace:h1>
<h1>Este h1 sem namespace não será afetado.</h1>
</body>
</html>Combinador de coluna (||)
O combinador de coluna (||) é colocado entre dois seletores CSS. Ele corresponde apenas àqueles elementos correspondidos pelo segundo seletor que pertencem aos elementos de coluna correspondidos pelo primeiro.
As células (td) que pertencem às colunas (col) receberão um fundo azul claro.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
col || td {
background-color: lightblue;
}
</style>
</head>
<body>
<table>
<colgroup>
<col class="first-col">
<col class="second-col">
</colgroup>
<tr>
<td class="first-col">Primeira coluna, primeira linha</td>
<td class="second-col">Segunda coluna, primeira linha</td>
</tr>
<tr>
<td class="first-col">Primeira coluna, segunda linha</td>
<td class="second-col">Segunda coluna, segunda linha</td>
</tr>
</table>
</body>
</html>As células (td) das colunas que têm a classe highlight terão o texto em vermelho e em negrito.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
col.highlight || td {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<colgroup>
<col class="highlight">
<col>
<col class="highlight">
</colgroup>
<tr>
<td>Primeira coluna</td>
<td>Segunda coluna</td>
<td>Terceira coluna</td>
</tr>
<tr>
<td>Primeira coluna</td>
<td>Segunda coluna</td>
<td>Terceira coluna</td>
</tr>
</table>
</body>
</html>As células (td) das colunas com a classe special-col que pertencem ao colgroup com a classe special-group terão fundo amarelo e borda preta de 2px. As outras células não serão afetadas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
colgroup.special-group > col.special-col || td {
background-color: yellow;
border: 2px solid black;
}
</style>
</head>
<body>
<table>
<colgroup>
<col class="special-col">
<col>
</colgroup>
<colgroup class="special-group">
<col class="special-col">
<col>
</colgroup>
<tr>
<td>Primeiro grupo, primeira coluna</td>
<td>Primeiro grupo, segunda coluna</td>
</tr>
<tr>
<td>Primeiro grupo, primeira coluna</td>
<td>Primeiro grupo, segunda coluna</td>
</tr>
<tr>
<td>Segundo grupo, primeira coluna</td>
<td>Segundo grupo, segunda coluna</td>
</tr>
<tr>
<td>Segundo grupo, primeira coluna</td>
<td>Segundo grupo, segunda coluna</td>
</tr>
</table>
</body>
</html>CSS Selectors,Pseudo Selector module
CSS define os padrões para selecionar elementos aos quais um conjunto de regras CSS será aplicado, juntamente com sua especificidade. O módulo de seletores CSS nos fornece mais de 60 seletores e cinco combinadores. Outros módulos fornecem seletores de pseudo-classes e pseudo-elementos adicionais.
Em CSS, seletores são padrões usados para combinar, ou selecionar, os elementos que você deseja estilizar. Seletores também são usados em JavaScript para permitir a seleção dos nós do DOM que retornam como uma NodeList.
Seja em CSS ou JavaScript, os seletores permitem direcionar elementos HTML com base em seu tipo, atributos, estados atuais e até mesmo posição no DOM. Combinadores permitem ser mais precisos ao selecionar elementos, permitindo selecionar elementos com base em sua relação com outros elementos.
Pseudo-classe
O que é uma Pseudo-classe?
Uma pseudo-classe é como uma etiqueta que você coloca em um seletor CSS para dizer “aplique esse estilo a um elemento quando ele estiver em um estado específico.” Um exemplo seria :
Aqui estão alguns exemplos para ajudar a entender:
a:visited
O que faz? Estiliza links que você já clicou.
Exemplo: Se você já visitou o site, o link vai ter uma cor diferente.
Uma pseudo-classe consiste em dois pontos (:) seguidos pelo nome da pseudo-classe (por exemplo, :hover). Uma pseudo-classe funcional também contém um par de parênteses para definir os argumentos (por exemplo, :dir()). O elemento ao qual uma pseudo-classe está anexada é definido como um elemento âncora (por exemplo, button no caso de button:hover).
As pseudo-classes permitem que você aplique um estilo a um elemento não apenas com base no conteúdo da árvore do documento, mas também em relação a fatores externos, como o histórico do navegador (:visited, por exemplo), o estado do seu conteúdo (como :checked em certos elementos de formulário), ou a posição do mouse (como :hover, que indica se o mouse está sobre um elemento ou não).
Pseudo-classes Estruturais da Árvore em CSS
As pseudo-classes estruturais da árvore permitem selecionar elementos com base na sua posição dentro da árvore do documento. Aqui está uma explicação e exemplos completos para cada uma das pseudo-classes mencionadas.
:rootRepresenta um elemento que é a raiz do documento. No HTML, isso geralmente é o elemento <html>.
:root
HTML:Este exemplo mostra como usar a pseudo-classe :root para definir variáveis CSS que podem ser usadas em todo o documento. A variável --main-color é definida no :root e usada no estilo do body.
/* styles.css */
/* Estilo para o elemento raiz */
:root {
--main-color: blue; /* Definindo uma variável CSS no elemento raiz */
body {
color: var(--main-color); /* Usando a variável CSS definida no :root */
}
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de :root</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo da Pseudo-classe :root</h1>
<p>Este exemplo mostra a utilização da pseudo-classe :root.</p>
</body>
</html>:emptyRepresenta um elemento sem filhos, exceto caracteres de espaço em branco.
:empty
HTML:Este exemplo mostra como usar a pseudo-classe :empty para estilizar elementos que não têm filhos. O elemento div com a classe empty não contém nenhum filho e recebe uma borda vermelha.
/* styles.css */
/* Estilo para elementos vazios */
.empty:empty {
border: 2px dashed red; /* Borda vermelha para elementos vazios */
height: 50px; /* Altura para visualizar a borda */
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de :empty</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo da Pseudo-classe :empty</h1>
<div class="not-empty">Este div não está vazio.</div>
<div class="empty"></div>
</body>
</html>:nth-childUsa notação An+B para selecionar elementos de uma lista de elementos irmãos.
:nth-last-childUsa notação An+B para selecionar elementos de uma lista de elementos irmãos, contando a partir do final da lista.
:nth-child e :nth-last-child
HTML:Este exemplo mostra como usar as pseudo-classes :nth-child e :nth-last-child para estilizar elementos com base em sua posição entre os irmãos. O segundo item da lista é estilizado em azul, e o penúltimo item da lista é estilizado em ver
/* styles.css */
/* Estilo para o segundo filho */
.list li:nth-child(2) {
color: blue; /* Azul para o segundo item da lista */
}
/* Estilo para o segundo filho a partir do final */
.list li:nth-last-child(2) {
color: green; /* Verde para o penúltimo item da lista */
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de :nth-child e :nth-last-child</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo das Pseudo-classes :nth-child e :nth-last-child</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>:first-childSeleciona um elemento que é o primeiro dos seus irmãos.
:last-childSeleciona um elemento que é o último dos seus irmãos.
:only-childSeleciona um elemento que não tem irmãos.
:nth-of-typeUsa notação An+B para selecionar elementos de uma lista de irmãos que correspondem a um determinado tipo.
:nth-last-of-typeUsa notação An+B para selecionar elementos de uma lista de irmãos que correspondem a um determinado tipo, contando a partir do final da lista.
:first-of-typeSeleciona um elemento que é o primeiro dos seus irmãos e também corresponde a um determinado tipo.
:last-of-typeSeleciona um elemento que é o último dos seus irmãos e também corresponde a um determinado tipo.
:only-of-typeSeleciona um elemento que não tem irmãos do tipo escolhido.
1.Pseudo-classes Linguísticas em CSS
As pseudo-classes linguísticas permitem selecionar elementos com base na direção do texto ou na linguagem do conteúdo, conforme determinado pelo idioma do documento. Aqui estão as pseudo-classes :dir() e :lang().
:dir()A pseudo-classe de direção seleciona um elemento com base na sua direção conforme determinado pelo idioma do documento.
1. :dir()
HTML: try in this lilnk
/*style.css*/
/* styles.css */
/* Estilo para elementos com direção esquerda-para-direita (ltr) */
.text-container:dir(ltr) {
background-color: #e0f7fa; /* Fundo azul claro */
padding: 10px;
border: 2px solid #00838f;
color: #006064;
}
/* Estilo para elementos com direção direita-para-esquerda (rtl) */
.text-container:dir(rtl) {
background-color: #ffe0b2; /* Fundo laranja claro */
padding: 10px;
border: 2px solid #f57c00;
color: #e65100;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo :dir()</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo da Pseudo-classe :dir()</h1>
<div dir="ltr" class="text-container">Este texto está na direção padrão (esquerda para a direita).</div>
<div dir="rtl" class="text-container">هذا النص مكتوب من اليمين إلى اليسار.</div>
</body>
</html>:lang()Seleciona um elemento com base na linguagem do seu conteúdo.
2. :lang()
HTML:
/* styles.css */
/* Estilo para parágrafos em inglês */
p:lang(en) {
background-color: #e3f2fd; /* Fundo azul claro */
color: #0d47a1;
padding: 10px;
border: 1px solid #0d47a1;
}
/* Estilo para parágrafos em português */
p:lang(pt-BR) {
background-color: #e8f5e9; /* Fundo verde claro */
color: #2e7d32;
padding: 10px;
border: 1px solid #2e7d32;
}
/* Estilo para parágrafos em francês */
p:lang(fr) {
background-color: #fce4ec; /* Fundo rosa claro */
color: #c2185b;
padding: 10px;
border: 1px solid #c2185b;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo :lang()</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo da Pseudo-classe :lang()</h1>
<p lang="en">This paragraph is in English.</p>
<p lang="pt-BR">Este parágrafo está em português.</p>
<p lang="fr">Ce paragraphe est en français.</p>
</body>
</html>Pseudo-classes de Localização em CSS
As pseudo-classes de localização permitem selecionar links e elementos direcionados dentro do documento atual. A seguir, você encontrará uma tradução para o português dessas pseudo-classes, exemplos completos de HTML e CSS para cada uma, e uma descrição detalhada do que cada exemplo faz.
:any-linkSeleciona um elemento se ele corresponder a :linkou :visited.
:linkSeleciona links que ainda não foram visitados.
:visitedSeleciona links que já foram visitados.
1. :any-link, :link, e :visited examples
HTML: Este exemplo mostra dois links: um link externo não visitado e um link que foi visitado. A pseudo-classe :any-link aplica um estilo básico a qualquer link, enquanto :link e :visited aplicam estilos diferentes para links não visitados e visitados, respectivamente.
body{
/* styles.css */
&>*:any-link{
color: red !important;
}
/* Estilo para qualquer link */
.link-example:any-link {
color: blue; /* Cor padrão para qualquer link */
text-decoration: none;
}
/* Estilo para links não visitados */
.link-example:link {
color: green; /* Verde para links não visitados */
}
/* Estilo para links visitados */
.link-example:visited {
color: purple; /* Roxo para links visitados */
}
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo :any-link, :link, :visited</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo das Pseudo-classes :any-link, :link, :visited</h1>
<a href="https://www.exemplo.com" class="link-example">Link Externo</a>
<a href="https://www.visitado.com" class="link-example">Link Visitado</a>
</body>
</html>:local-linkSeleciona links cujo URL absoluto é o mesmo que o URL de destino.
2. :local-link
HTML:Este exemplo mostra um link local que navega para uma seção dentro da mesma página. A pseudo-classe :local-link aplica um estilo específico a links cujo URL absoluto é o mesmo que o URL de destino.
/* styles.css */
/* Estilo para links locais */
.local-link:local-link {
color: red; /* Vermelho para links locais */
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo :local-link</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo da Pseudo-classe :local-link</h1>
<a href="#section1" class="local-link">Ir para Seção 1</a>
<a href="https://www.exemplo.com#section2" class="local-link">Link Externo para Seção 2</a>
<div id="section1" class="section">
<h2>Seção 1</h2>
<p>Conteúdo da seção 1.</p>
</div>
</body>
</html>:targetSeleciona o elemento que é o alvo do URL do documento.
:target-withinSeleciona elementos que são o alvo do URL do documento, mas também elementos que têm um descendente que é o alvo do URL do documento.
:target e :target-within
HTML:Este exemplo mostra um link que navega para uma seção específica na mesma página. A pseudo-classe :target aplica um estilo ao elemento que é o alvo do URL, enquanto :target-within aplica um estilo ao contêiner que contém um descendente que é o alvo do URL.
/* styles.css */
/* Estilo para o elemento alvo */
.section:target {
background-color: #ffeb3b; /* Fundo amarelo para o elemento alvo */
border: 2px solid #fbc02d;
}
/* Estilo para elementos dentro do elemento alvo */
.container:target-within {
background-color: #c5e1a5; /* Fundo verde claro para o contêiner com um descendente alvo */
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo :target e :target-within</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo das Pseudo-classes :target e :target-within</h1>
<a href="#section2">Ir para Seção 2</a>
<div id="section2" class="section">
<h2>Seção 2</h2>
<p>Conteúdo da seção 2.</p>
</div>
<div id="container" class="container">
<div id="subtarget" class="subsection">
<h3>Subseção Alvo</h3>
<p>Conteúdo da subseção alvo.</p>
</div>
</div>
</body>
</html>:scopeRepresenta elementos que são um ponto de referência para os seletores corresponderem.
:scope
HTML and css :Este exemplo mostra uma lista com subitens. A pseudo-classe :scope aplica estilos aos itens dentro do escopo da lista principal, incluindo subitens.
/* styles.css */
/* Estilo para elementos dentro do escopo da lista */
ul.scope-example:scope li {
background-color: #bbdefb; /* Fundo azul claro */
margin: 5px 0;
}
/* Estilo adicional para subitens */
ul.scope-example:scope ul li {
background-color: #90caf9; /* Fundo azul um pouco mais escuro */
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo :scope</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo da Pseudo-classe :scope</h1>
<ul class="scope-example">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</body>
</html>Pseudo-classes de Estado de Recurso em CSS
As pseudo-classes de estado de recurso aplicam-se a mídias que podem estar em um estado de reprodução, como vídeos. Aqui estão as pseudo-classes :playing e :paused, exemplos completos de HTML, CSS e JavaScript, e uma descrição detalhada do que cada exemplo faz.
:playingRepresenta um elemento de mídia que está em estado de reprodução.
:pausedRepresenta um elemento de mídia que está em estado de pausa.
:playing e :paused
HTML:Este exemplo mostra um elemento de vídeo com dois botões para controlar a reprodução: “Play” e “Pause”. As pseudo-classes :playing e :paused são usadas para aplicar estilos diferentes ao vídeo, dependendo se ele está em estado de reprodução ou pausa. Quando o vídeo está tocando, ele terá uma borda verde, e quando está pausado, uma borda vermelha.
/* styles.css */
/* Estilo para o vídeo quando está tocando */
video:playing {
border: 5px solid green; /* Borda verde para o vídeo tocando */
}
/* Estilo para o vídeo quando está pausado */
video:paused {
border: 5px solid red; /* Borda vermelha para o vídeo pausado */
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo :playing e :paused</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo das Pseudo-classes :playing e :paused</h1>
<video id="video" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Seu navegador não suporta o elemento de vídeo.
</video>
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>
<script src="script.js"></script>
</body>
</html>
/*js code here*/
/* script.js */
const video = document.getElementById('video');
const playButton = document.getElementById('playButton');
const pauseButton = document.getElementById('pauseButton');
playButton.addEventListener('click', () => {
video.play();
});
pauseButton.addEventListener('click', () => {
video.pause();
});
Pseudo-classes Temporais e Estruturais em CSS
As pseudo-classes temporais aplicam-se quando visualizamos algo que tem temporização, como uma faixa de legendas WebVTT. As pseudo-classes estruturais relacionam-se à localização de um elemento dentro da árvore do documento.
:currentRepresenta o elemento ou ancestral do elemento que está sendo exibido.
:pastRepresenta um elemento que ocorre inteiramente antes do elemento :current.
:futureRepresenta um elemento que ocorre inteiramente após o elemento :current.
Exemplo: Este exemplo mostra uma linha do tempo com três eventos: passado, atual e futuro. As pseudo-classes :past, :current e :future são usadas para aplicar estilos diferentes aos eventos com base em sua posição temporal.
/* styles.css */
/* Estilo para eventos passados */
.event.past {
color: grey; /* Cinza para eventos passados */
}
/* Estilo para o evento atual */
.event.current {
color: blue; /* Azul para o evento atual */
}
/* Estilo para eventos futuros */
.event.future {
color: green; /* Verde para eventos futuros */
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Pseudo-classes Temporais</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo de Pseudo-classes Temporais</h1>
<div id="timeline">
<div class="event past">Evento Passado</div>
<div class="event current">Evento Atual</div>
<div class="event future">Evento Futuro</div>
</div>
</body>
</html>Pseudo-classes de Estado de Exibição de Elementos
As pseudo-classes de estado de exibição permitem a seleção de elementos com base em seus estados de exibição, como quando um elemento está em tela cheia ou no modo picture-in-picture.
O que são as Pseudo-classes de Estado de Exibição?
As pseudo-classes de estado de exibição são usadas para aplicar estilos a um elemento dependendo do estado atual de exibição dele.
Abaixo estão as principais pseudo-classes de estado de exibição e o que elas fazem:
:fullscreenSeleciona um elemento que está atualmente no modo de tela cheia.
Exemplo: mudar o estilo de um vídeo quando ele está em tela cheia.- Como funciona?: Quando você coloca um vídeo ou uma imagem em tela cheia, este estilo será aplicado a ele.
A visualização acontece: Antes de Tela Cheia & Durante Tela Cheia
/* Estilo para o elemento quando ele está em tela cheia */
:fullscreen {
background-color: black; /* Muda o fundo para preto quando o elemento está em tela cheia */
color: white; /* Muda a cor do texto para branco */
}Exemplo completo:
/* styles.css */
/* Estilo padrão para o vídeo */
video {
width: 100%;
max-width: 600px;
display: block;
margin: 0 auto;
}
/* Estilo para o vídeo quando está em tela cheia */
:fullscreen {
background-color: black; /* Muda o fundo para preto quando o vídeo está em tela cheia */
color: white; /* Muda a cor do texto para branco */
}
/* Estilo para o botão */
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de :fullscreen</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo de :fullscreen</h1>
<video id="myVideo" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Seu navegador não suporta o elemento de vídeo.
</video>
<button onclick="toggleFullscreen()">Tela Cheia</button>
<script>
function toggleFullscreen() {
const video = document.getElementById('myVideo');
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) { // Firefox
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) { // Chrome, Safari e Opera
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) { // IE/Edge
video.msRequestFullscreen();
}
}
</script>
</body>
</html>Como funciona:
- HTML: Inclui um vídeo e um botão. O botão chama uma função JavaScript que coloca o vídeo em tela cheia.
- CSS: Define um fundo preto e texto branco para o vídeo quando ele está em tela cheia.
:modal
O que faz? Seleciona um elemento que está em um estado de modal, onde ele bloqueia a interação com outros elementos até ser fechado.
Exemplo: :modal Aplica um estilo ao elemento quando ele está em um estado de modal, bloqueando a interação com outros elementos até ser fechado.
/* styles.css */
/* Estilo para o botão */
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
/* Estilo para o modal */
.modal {
display: none; /* Esconde o modal por padrão */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5); /* Fundo escuro e transparente */
}
/* Estilo para o conteúdo do modal */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* Estilo para o botão de fechar */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Estilo para o modal quando está ativo */
:modal {
display: block; /* Exibe o modal */
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de :modal</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo de :modal</h1>
<button id="openModal">Abrir Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Este é um Modal</h2>
<p>Você está vendo um modal. Feche-o para interagir com o conteúdo da página novamente.</p>
</div>
</div>
<script>
const modal = document.getElementById('myModal');
const btn = document.getElementById('openModal');
const span = document.getElementsByClassName('close')[0];
btn.onclick = function() {
modal.style.display = 'block';
}
span.onclick = function() {
modal.style.display = 'none';
}
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = 'none';
}
}
</script>
</body>
</html>Como funciona:
- HTML: Inclui um botão para abrir um modal e o modal em si com um conteúdo e um botão de fechar.
- CSS: Define a aparência do modal e do botão, e o estado visual quando o modal está aberto.
A visualização acontece: Antes do Modal,Durante o Modal:
:picture-in-picture
O que faz? Seleciona um elemento que está atualmente no modo picture-in-picture.
Exemplo: Você pode aplicar um estilo especial a um vídeo que está no modo picture-in-picture.
/* styles.css */
/* Estilo padrão para o iframe */
iframe {
width: 100%;
max-width: 560px;
height: 315px;
display: block;
margin: 0 auto;
border: none;
}
/* Estilo para o iframe quando está no modo picture-in-picture */
:picture-in-picture {
border: 4px solid blue; /* Adiciona uma borda azul ao redor do iframe */
border-radius: 8px; /* Adiciona bordas arredondadas ao redor do iframe */
box-shadow: 0 0 12px rgba(0, 0, 255, 0.5); /* Adiciona uma sombra azul clara ao redor do iframe */
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de :picture-in-picture</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemplo de :picture-in-picture</h1>
<iframe
id="myIframe"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
allow="picture-in-picture"
allowfullscreen></iframe>
</body>
</html>if you find this content useful you can buy me a coffee, by buying me a coffee you’re supporting the content and helping it being always updated:
https://buymeacoffee.com/santoscampj
or either through QR code
