Como direcionar parte de uma página da web usando seletores CSS.

Cascading Style Sheets (CSS) permite transformar a aparência de suas páginas da web. De fontes e cores a espaçamento e layout geral, todos os tipos de ferramentas de design estão ao seu alcance. Embora CSS seja uma linguagem complicada em sua totalidade, existem apenas dois conceitos básicos que você precisa entender para começar.

Tudo começa identificando exatamente qual parte da página você deseja estilizar.

CSS = Seletores + Declarações

Um arquivo CSS contém uma série de regras que descrevem como um arquivo HTML deve ser formatado. Cada regra consiste em duas partes: o que estilizar e como estilizar. A primeira parte é controlada por uma série de termos conhecidos como “seletores”.

Os exemplos neste artigo incluem declarações de estilo, mas não são o foco: são os próprios seletores.

Historicamente, havia três níveis de seletor CSS (ou versões) com vários graus de suporte do navegador. Em 2020, de acordo com Can I Use , todos eles estão disponíveis para mais de 99 por cento dos usuários em todo o mundo.

Seletores de nível 1

O nível 1 introduziu os quatro tipos fundamentais de seletores que cobrem um grande número de casos, ainda hoje.

padronizar Partidas
E todos os elementos E
.c todos os elementos com class = "c"
#myid o elemento com id = "myid"
EF um elemento F dentro de um elemento E
Pseudo-classes
E:link um hiperlink para uma página que não foi visitada anteriormente
E:visited um hiperlink para uma página que já foi visitada
E:active um hiperlink que está atualmente selecionado
Pseudo-elementos
E::first-line a primeira linha formatada de um elemento E
E::first-letter a primeira letra formatada de um elemento E

Seletor de tipo

O seletor mais simples é o “seletor de tipo”. Ele tem como alvo todas as instâncias de um elemento, como um parágrafo ou texto em negrito:

 p { margin-bottom: 0; }
b { font-family: sans-serif; }

Class Selector

O atributo class permite que mais semânticas sejam adicionadas a um elemento HTML, como um tipo específico de parágrafo. Esses elementos podem ser selecionados em CSS da seguinte maneira:

 .intro { font-weight: bold; }

Este seletor corresponderia a:

 <p class="intro">…</p>

Mas observe que também corresponderia a:

 <ul class="intro">…</ul>

Se você deseja que ele se aplique apenas a parágrafos de introdução, pode combinar o seletor de tipo e o seletor de classe:

 p.intro { font-weight: bold; }

Seletor de ID

O atributo HTML id deve ser único em um documento, por exemplo, se você tiver:

 <div id="contents">…</div>

Esse deve ser o único elemento com um id de “conteúdo”. Um seletor de ID permite que você direcione esse elemento específico em um documento:

 #contents { color: #333; }

Seletor de descendente

Estritamente, um “combinador”, porque este seletor trata do espaço entre dois outros. HTML é hierárquico, conforme explicado em nossa visão geral do DOM . Um seletor descendente permite que um elemento seja identificado por seu contexto dentro de outro elemento:

 table b { font-weight: normal; }

Pseudo classes e elementos

Os pseudo seletores têm como alvo classes ou elementos que não existem explicitamente, mas são disponibilizados de qualquer maneira. Pense neles como bônus de conteúdo especial:

 p::first-line { text-transform: uppercase; }

Listas de seletores

Use uma vírgula para combinar os seletores em uma lista se quiser aplicar o mesmo conjunto de regras a cada um. Ao invés de:

 th { padding: 1em; }
td { padding: 1em; }

Você pode escrever:

 th, td { padding: 1em; }

Especificidade

Uma folha de estilo é uma série de regras que usam um seletor para corresponder a um elemento, mas o que acontece quando mais de uma regra corresponde a um determinado elemento? O comportamento resultante é regido pela “especificidade” que define qual regra é usada em um caso como:

 p.intro { color: black; }
p { color: gray; }

Nesses casos, a regra que tem prioridade é definida por sua especificidade, da seguinte forma:

  1. Os seletores de ID (`# conteúdo`) são os mais específicos.
  2. Os seletores de classe (`.author`) são menos específicos.
  3. Os seletores de tipo (`p`) são os menos específicos.

Ao calcular a especificidade, cada nível é considerado apenas se dois seletores tiverem a mesma pontuação no nível superior, então “#contents” é mais específico do que “article.news p.author.special” porque o anterior “ganha” nos seletores de ID.

Seletores de nível 2

A próxima revisão de seletores CSS introduziu seletores de atributo, expandiu em pseudo-classes e pseudo-elementos, e adicionou dois novos combinadores.

padronizar Partidas
* qualquer elemento
E > F um elemento F filho de um elemento E
E + F um elemento F imediatamente precedido por um elemento E
Seletores de atributos
E[foo] um elemento E com um atributo "foo"
E[foo="bar"] um elemento E cujo atributo "foo" é exatamente "bar"
E[foo~="bar"] um elemento E cujo atributo "foo" é uma lista de valores separados por espaços em branco, um dos quais é "bar"
E[foo|="en"] um elemento E cujo atributo "foo" tem uma lista separada por hífen de valores começando com "en"
Pseudo-classes
E:first-child um elemento E, primeiro filho de seu pai
E:lang(fr) um elemento do tipo E na linguagem "fr"
Pseudo-elementos
E::before conteúdo gerado antes do conteúdo de um elemento E
E::after conteúdo gerado após o conteúdo de um elemento E

Seletor Universal

O “*” corresponde a qualquer elemento. Nem sempre é tão útil, mas se quiser redefinir as margens padrão, por exemplo, você pode fazer isso:

 * { margin: 0; }

Seletores de Atributo

Os seletores de atributos permitem que os estilos sejam direcionados de forma muito específica, filtrados por um atributo de elemento:

 a[title] { text-decoration: underline dotted; }

Combinador infantil: um elemento imediatamente dentro de outro

Semelhante ao combinador descendente, mas este corresponde apenas a filhos imediatos, não a descendentes mais abaixo na árvore. Por exemplo, “ul> li” corresponderá apenas ao texto da “Seção 1” aqui, e não à “Seção 1.1”:

 <ul>
<li>
Section 1
<ul>
<li>Section 1.1</li>
<li>Section 1.2</li>
</ul>
<li>
</ul>

Combinador de irmãos adjacentes: o próximo irmão

 h1 + p { font-weight: bold; }

Freqüentemente útil para controlar as margens, ou um parágrafo introdutório sem uma classe específica, este seletor corresponde a um elemento apenas se ele seguir imediatamente outro. No exemplo, apenas o primeiro parágrafo aqui será correspondido, não o segundo:

 <h1>Contents</h1>
some extra text
<p>Introductory paragraph</p>
<p>Following paragraph</p>

Observe que esse seletor considera apenas os elementos – não o texto – ao decidir qual é o próximo irmão.

Herança

Algumas propriedades CSS herdam seu valor de um elemento ancestral. Na prática, isso significa – por exemplo – que definir a face da fonte do elemento “corpo” significa que cada parágrafo, tabela, etc. também usa a mesma face da fonte.

Claro, isso é exatamente o que você esperaria, mas considere uma propriedade que não herda: “margem”, por exemplo. Você não gostaria que cada parágrafo individual ou pedaço de texto em negrito tivesse a mesma margem de todo o documento.

Relacionado: Exemplos de código CSS simples que você pode aprender em 10 minutos

Uma boa regra é direcionar os elementos da maneira mais geral possível – não direcione cada elemento individual quando um simples seletor de “corpo” for suficiente.

Seletores de nível 3

Muitas outras pseudo classes foram adicionadas neste nível, junto com alguns seletores de atributos e um novo combinador.

padronizar Partidas
E ~ F um elemento F precedido por um elemento E
Seletores de atributos
E[foo^="bar"] um elemento E cujo atributo "foo" começa com a string "bar"
E[foo$="bar"] um elemento E cujo atributo "foo" termina com a string "bar"
E[foo*="bar"] um elemento E cujo atributo "foo" contém a substring "bar"
Pseudo-classes
E:root um elemento E, raiz do documento
E:nth-child(n) um elemento E, o enésimo filho de seu pai
E:nth-last-child(n) um elemento E, o enésimo filho de seu pai, contando a partir do último
E:nth-of-type(n) um elemento E, o enésimo irmão de seu tipo
E:nth-last-of-type(n) um elemento E, o n-ésimo irmão de seu tipo, contando a partir do último
E:last-child um elemento E, último filho de seu pai
E:first-of-type um elemento E, primeiro irmão de seu tipo
E:last-of-type um elemento E, último irmão de seu tipo
E:only-child um elemento E, filho único de seu pai
E:only-of-type um elemento E, único irmão de seu tipo
E:empty um elemento E que não tem filhos (incluindo nós de texto)
E:target um elemento E sendo o destino do URI de referência
E:enabled um elemento E da interface do usuário que está habilitado
E:disabled um elemento E da interface do usuário que está desativado
E:checked um elemento E da interface do usuário que é verificado
E:not(s) um elemento E que não corresponde ao seletor simples s

Seletores de Atributo

Você pode selecionar elementos com um atributo que começa com um determinado valor: a[href^="https:"] , termina com um determinado valor: img[src$=".gif"] ou contém um valor: a[*="value"] .

Pseudo classes

As pseudo classes adicionais incluem “: último-filho”, “: vazio” (para corresponder a um elemento sem conteúdo) e “: verificado” que corresponde a um elemento como uma entrada de caixa de seleção, mas apenas quando está marcada.

Combinador geral de irmãos: um irmão seguinte

Semelhante ao Combinador de Irmãos Adjacentes do Nível 2, ele corresponde a qualquer irmão que vier após o outro, não apenas o próximo:

 h1 ~ p { font-size: 110%; }

Seletores CSS e como usá-los

Agora você sabe quase tudo que há para saber sobre como selecionar parte de uma página da web usando CSS. Agora você está pronto para estilizar suas páginas com a grande variedade de propriedades CSS que cobrem tudo, desde cores até layout.

Crédito da imagem: Pankaj Patel / Unsplash