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 — 10.023 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!

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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