Planos a partir de R$ 39/mês Inscreva-se Agora

Seletores CSS – Descendente direto vs descendente

Seletores CSS - Descendente direto vs descendente

A diferença entre selecionar os descendentes diretos e os descendentes é bem simples.


/* Seleciona apenas as tags p
que estão dentro das tags div.
Seleção de descendente direto. */
div > p {

}

/* Seleciona todas as tags p
dentro das tags div.
Seleção de descendente. */
div p {

}

Dizem que a seleção de descendentes diretos é mais rápida do que a de descendentes. Porém eu afirmo que a diferença de velocidade certamente será imperceptível em 95% dos projetos que você criar. Então não se preocupe muito com a questão de performance, mas sim com os itens que deseja realmente selecionar.

Veja no exemplo abaixo:

See the Pen seletor-descendente-direto by Andre Origamid (@origamid) on CodePen.

Mais Dicas

Código

Como criar um Scroll Suave para links internos

Código

Animação de SVG baseada em strokes

Código

DICA #03 CSS – Hexadecimal

Código

Dica #02 CSS – border-radius

Design

Dica #05 Tipografia – Serifadas