Seletor de Elemento Filho do CSS

Em comparação com o seletor de descendentes, o seletor de subelemento (Child selectors) pode escolher apenas elementos que são subelementos de algum elemento.

Escolher subelemento

Se você não deseja escolher elementos descendentes aleatórios, mas sim diminuir o escopo, escolher apenas os subelementos de um elemento específico, use o seletor de subelemento (Child selector).

Por exemplo, se você deseja escolher apenas os elementos strong que são subelementos do elemento h1, você pode escrever assim:

h1 > strong {cor: vermelho;}

Esta regra transformará os dois elementos strong abaixo do primeiro h1 em vermelho, mas o strong do segundo h1 não será afetado:

<h1>Esta é <strong>altamente</strong> <strong>altamente</strong> importante.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

Experimente você mesmo

Explicação de Sintaxe

Você deve ter notado que o seletor filho usa o sinal de maior (>).

Pode haver espaços em branco nos lados do símbolo de combinação de filho, o que é opcional. Portanto, qualquer uma das seguintes formas é válida:

h1 > strong
h1> strong
h1 >strong
h1>strong

Se lido da direita para a esquerda, o seletor h1 > strong pode ser interpretado como 'escolher todos os elementos strong que são elementos filhos do elemento h1'.

Combinação de Seletor Descendente e Seletor Filho

Veja a seguir este seletor:

table.company td > p

A seleção acima escolherá todos os elementos p que são elementos filhos do elemento td, que por sua vez herda do elemento table, que possui uma classe contendo company.