3

Levando em consideração o código HTML abaixo, existe alguma maneira utilizando somente CSS de aplicar estilo diferente para o elemento i antes do texto e o outro elemento i após o texto?

<a href="#">
  <i class="i i--icon"></i>
  Text
  <i class="i i--icon"></i>
</a>

Poderia aplicar um span ao texto e resolver facilmente isso, porem gostaria de saber se existe uma forma de fazer isso sem adicionar mais código HMTL.

Obrigado.

3 Respostas 3

3

Sim, existe. Podes fazer isso utilizando o selector :nth-child(). Eis um exemplo abaixo:

i {color:black; font-size: 25px;}
i:nth-child(2) {color: red;}

a {text-decoration: none;}
<a href="#">
  <i class="i i--icon">#</i>
  Text
  <i class="i i--icon">#</i>
</a>

Neste exemplo acima, o código CSS está a apontar logo diretamente para o elemento i porque neste excerto de código HTML não existe nenhuma classe parent para apontar de uma maneira mais precisa ao elemento que queremos modificar. Mas num projecto real deveria ser implementada uma class parent para termos mais controlo sobre aquilo que queremos modificar e o código ficaria algo mais ou menos deste género: http://jsfiddle.net/z85zhace/

Podes ler mais sobre o :nth-child() em: CSS3 :nth-child() Selector

1
  • 1
    Legal, não imaginei que seria possível utilizando o :nth-child(). Obrigado @Chun!
    – Bruno Wego
    Commented 11/10/2015 às 13:02
2

Fiz uma pequena modificação na resposta do @Chun que acabou servindo exatamente para o que precisava:

.i--icon {
  &:nth-child(1) {
    margin-right: .5rem;
  }

  &:nth-last-child(1) {
    margin-left: .5rem;
  }
}

Eu segui as orientações do CSS Protips.

1

Pode utilizar os pseudo elementos ::after e ::before para estilizar respectivamente o conteúdo antes e depois de um elemento.

Assim você evita marcações desnecessárias no HTML e não precisa optar por fazer uso do span que comentou, o qual não tem relevância alguma para o documento por ser apenas um elemento de natureza "visual".

a { text-decoration: none; color: #333 }

a::after,
a::before {
    content: ' ■ '
}

a::after  { color: #2ecc71 }
a::before { color: #8e44ad }
<a href='#'>stackoverflow</a>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .