Você pode direcionar os chamados elementos filhos. Esses são aqueles que são diretamente subordinados a outros elementos. Isso pode soar um pouco abstrato, mas pode ser bem explicado por meio de um exemplo.
<body> <p>Parágrafo 1</p> <p>Parágrafo 2</p> <p>Parágrafo 3</p> </body>
Aqui, o body é o elemento pai. Os elementos p são cada um filhos do body. Com base nesse conhecimento, é possível aplicar o seletor de elementos filhos.
body>p {
color: azul;
}
Essa sintaxe aplica a cor azul a todos os parágrafos que são filhos diretos do body.
O exemplo a seguir mostra novamente as diferenças entre as duas instruções body p e body>p.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monoespaçado;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
<p>Parágrafo 3</p>
<div>
<p>Parágrafo 4</p>
</div>
</body>
</html>Os três primeiros parágrafos definidos p são filhos diretos do body. A instrução body p aplica uma cor azul a todos os parágrafos. Já body>p afeta exclusivamente os três primeiros parágrafos. Portanto, esses parágrafos também são exibidos em um tamanho de fonte maior.
Em seguida, gostaria de apresentar a vocês o seletor de elementos subsequentes. Esse seletor marca um elemento que segue imediatamente outro elemento e possui o mesmo elemento pai. Novamente, um exemplo:
h1+p {
color: azul;
}
Com essa sintaxe, a cor do texto de um parágrafo é definida como azul. No entanto, isso só é válido se o parágrafo estiver diretamente após um título de primeira ordem.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: azul;
}
</style>
</head>
<body>
<h1>Título</h1>
<p>Parágrafo 1</p>
<h2>Título</h2>
<p>Parágrafo 2</p>
<p>Parágrafo 3</p>
<div>
<p>Parágrafo 4</p>
</div>
</body>
</html>Veja o resultado no navegador.
Apenas o primeiro parágrafo será exibido em azul. Os outros parágrafos estão em preto. Isso ocorre porque esses elementos p não seguem h1, mas sim h2.
Aliás, em relação aos elementos subsequentes, foram introduzidas no CSS3 outras possibilidades. A partir de agora é possível acessar todos os elementos subsequentes de um elemento específico. Um exemplo:
h1~p {
color: vermelho;
}
Com essa sintaxe, todos os parágrafos que seguem h1 serão selecionados.
Não é possível direcionar apenas elementos diretamente. Também é possível acessar via os atributos dos elementos.
Aqui estão alguns desses seletores:
• [att] – O elemento deve apenas conter o atributo. Se um valor é passado, é irrelevante.
• a[href] – Todos os hyperlinks (<a href=…>) são marcados. Isso não se aplica às definições de âncora (<a name=…>).
• [align=left] – Marca todos os elementos cujo atributo align possui o valor left.
• [attr~=valor] – Marca todos os elementos nos quais valor está contido em uma lista de valores separados por espaços.
• [attr|=valor] – Marca um elemento se o valor especificado estiver no início de uma cadeia de caracteres separada por hífens no atributo.
• img[width="200"] – Aqui são marcadas todas as imagens com uma largura de 200 pixels.
Claro, surge a questão de quando poderia ser útil usar esses seletores baseados em atributos. Pense, por exemplo, em um formulário e caixas de seleção definidas. Caixas de seleção são - como você já sabe - definidas pelo elemento input. O problema é que o elemento input também é usado para a definição de campos de texto normais. Portanto, não é possível aplicar uma formatação diferente para caixas de seleção e campos de texto. É exatamente nesse ponto que os seletores de atributos entram em jogo. Para uma melhor compreensão, confira o seguinte exemplo:
<body> Nome: <input type="text" id="nome" /> <br /> Homem: <input type="checkbox" name="gênero" id="gênero" /> <br /> Mulher: <input type="checkbox" name="gênero" id="gênero" /> </body>
Aqui foram definidos diferentes elementos de formulários.
• um campo de entrada de texto
• duas caixas de seleção
Esses campos devem ser formatados.
input {
border:3px solid #000;
width: 10em;
}Os campos são atribuídos a uma moldura e largura.
O problema: a largura definida deveria ser aplicada apenas ao campo de entrada de texto, não às caixas de seleção. No entanto, devido ao seletor de elemento, não há diferenciação entre os diferentes tipos de campo aqui. Para que essa diferenciação funcione, são utilizados seletoreos de atributos. Aqui está um exemplo de como isso pode ser feito:
input[type="checkbox"] {
width: auto;
}
O seletor mostrado realmente acessa apenas elementos input que possuem a combinação de atributo-valor type="checkbox".
Repetições
O CSS finalmente oferece a possibilidade de abordar repetições. Claro, surge a pergunta do que isso pode ser útil. Esses seletores são úteis, por exemplo, quando se deseja estilizar cada segunda linha de uma tabela com cores diferentes. Antes de apresentar os seletores disponíveis, um exemplo muito típico:
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
Este é um lista normal. Com o CSS, cada terceira entrada da lista deve receber uma cor de fundo.
O seletor utilizado para isso é o nth-child(). Através deste seletor, cada elemento filho de n-ésimo é selecionado.
#sprachen li:nth-child(3n) {
background-color: red;
}
Os seguintes seletores estão disponíveis:
• :root - Com o seletor :root, é possível selecionar a raiz de um documento.
• :nth-child(n) - Seleciona cada elemento n-ésimo dentro de um elemento pai. Esse seletor é útil principalmente quando vários elementos precisam ser estilizados de forma diferente. N é uma palavra-chave fixa à qual operações matemáticas podem ser aplicadas. N pode ser equiparado ao valor 1.
• :nth-last-child(n) - Seleciona cada n-ésimo elemento dentro de um elemento, com os elementos filhos sendo percorridos de trás para frente.
• :nth-of-type(n) - Seleciona cada n-ésimo elemento do mesmo tipo HTML no mesmo nível.
• :nth-last-of-type(n) - Seleciona cada n-ésimo elemento no mesmo nível, com os elementos sendo percorridos de trás para frente.
• :first-child - Seleciona o primeiro elemento filho dentro de um elemento.
• :last-child - Seleciona o último elemento filho dentro de um elemento.
• :first-of-type - Seleciona o primeiro elemento do mesmo tipo de elemento HTML dentro de um elemento pai.
• :last-of-type - Seleciona o último elemento do mesmo tipo de elemento HTML dentro de um elemento pai.
• :only-child - Seleciona um elemento que não possui elementos irmãos e é o único elemento filho no elemento pai.
• :only-of-type - Seleciona um elemento que não possui irmãos do mesmo tipo de elemento HTML e é o único elemento desse tipo no elemento pai.
• :empty - Seleciona elementos vazios.
Os seletores apresentados tornam o trabalho com HTML significativamente mais fácil, uma vez que as definições de classe elaboradas são coisa do passado.
