Teste seu conhecimento #19

Há muito tempo que eu não publico um “Teste seu conhecimento”. Esta semana, revendo algumas funcionalidades das CSS deparei-me com um daqueles comportamentos que raramente usamos no dia a dia e permanecem esquecidos ou mesmo “ocultos” nas especificações. Assim, resolvi compartilhar com meus leitores e em lugar de escrever uma matéria sobre o comportamento resolvi lançar esse desafio. Você é capaz de resolvê-lo?

O desafio consiste no seguinte:
É dada uma marcação HTML com um elemento DIV pai e seu elemento DIV filho, ou seja, um DIV aninhado em outro e algumas regras de estilo para os seletores div (pai) e div > div (filho). Faça download da marcação HTML neste link (abre em nova janela).

Sua missão, caso decida aceitá-la é:
Sem alterar a marcação HTML e sem criar novos seletores CSS, ou seja, somente com criação de novas declarações CSS para os seletores existentes, transformar a renderização inicial em um círculo azul (blue opaca) com borda vermelha (red opaca) conforme mostrado na figura a seguir:

Encontrou a solução? Quer compartilhar? Envie o arquivo .html sem zipar para maujor[AT]maujor[PT]com ou publique (JSFiddle ou outro lugar) e informe o link.

Em breve divulgarei o resultado.

Divirta-se!