Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Teste seu conhecimento #19

Publicado em: 2015-03-6 — 13.840 visualizacoes

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:

renderização desafio antes e depois

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!

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2015-03-6 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2015/03/06/teste-seu-conhecimento-19/trackback no seu site.

6 comentários na matéria: “Teste seu conhecimento #19”

  1. MarcoNo Gravatar disse:

    https://jsfiddle.net/tulinhobhz/0rom51mw/

  2. Marcio Vinicius SenaNo Gravatar disse:

    http://jsfiddle.net/marciovsena/wmg5ztvm/

  3. Fábio SanetiNo Gravatar disse:

    http://jsfiddle.net/fabiosaneti/rmj1hwxb/

  4. Georlandio OliveiraNo Gravatar disse:

    Muito bom!!

  5. Vucamberg B. SantosNo Gravatar disse:

    https://jsfiddle.net/v5uw7L38/

  6. Cristiano S. OliveiraNo Gravatar disse:

    https://jsfiddle.net/8tb5atwb/3/

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo