Então, você aprendeu os seletores básicos: identificador, classe, e descendente - e achou que tinha aprendido tudo? Se acha que sim, então você está deixando de aproveitar uma gama de possibilidades. Enquanto a maioria dos seletores mencionados nesse artigo fazem parte da especificação do CSS3, e estão, consequentemente, disponíveis apenas em navegadores modernos, você deve saber todos eles de cabeça.

1. *

* {
 margin: 0;
 padding: 0;
}

Vamos falar primeiro dos mais óbvios, para os iniciantes, antes de começarmos a falar dos seletores mais avançados.

O asterísco (ou estrela) tem como alvo todos os elementos em uma página. Muitos desenvolvedores usam-no para zerar as margens e o preenchimento (margine padding, respectivamente). Embora isso funcione para testes rápidos, recomendo não usar essa técnica em produção. Ela deixa o navegador muito pesado (por ter de selecionar todo e cada elemento), além de ser desnecessário.

O * também pode ser usado como um seletor filho.

#container * {
 border: 1px solid black;
}

Isso mirará todo elemento que for filho de uma div com um identificador nomeado de #container. Novamente, não use muito essa técnica em produção. De preferência, nunca.

Visualizar Demonstração

Compatibilidade

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2. #X

#container {
 width: 960px;
 margin: auto;
}

Prefixar um seletor com o "jogo da velha" (ou cerquilha, caso prefira), permite mirar algum elemento com um identificador. Ele é um dos seletores mais usados, contudo, seja cuidadoso ao usar seletores com identificador.

Faça-se a seguinte pergunta: Preciso, realmente, aplicar um identificador a esse elemento para poder selecioná-lo

Seletores identificador são rígidos e não permitem reuso. Se possível, tente usar, primeiro, o nome da tag, um dos novos elementos do HTML5 ou uma pseudo-classe.

Visualizar Demonstração

Compatibilidade

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. .X

.error {
color: red;
}

Esse é um seletor de classe. A diferença entre um identificador e uma classe é que, com a classe, você pode selecionar vários elementos. Use uma classe quando você precisar estilizar um grupo de elementos. Alternativamente, use um identificador quando precisar achar "uma agulha num palheiro", para estilizar um único elemento.

Visualizar Demonstração

Compatibilidade

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. X Y

li a {
text-decoration: none;
}

O próximo seletor mais comum é o seletor de descendência.Quando precisar ser mais específico em seus seletores, use esse. Por exemplo, se, ao invés de mirar todas as tags de âncora (a), talvez você só precise selecionar aquelas que estão dentro de uma lista não ordenada? Esse seletor, o seletor descendente, é especificamente para isso.

Dica - Se seu seletor parecer com isso X Y Z A B.error, tenha certeza que há algo errado. Pergunte-se se, realmente, é necessário todo esse peso, toda essa especificidade.

Visualizar Demonstração

Compatibilidade

• IE6+
• Firefox
• Chrome
• Safari
• Opera

5. X

a { color: red; }
ul { margin-left: 0; }

E se você quiser selecionar todos os elementos da página, de acordo com o tipo deles, ao invés do seu identificador ou classe? Faça o simples e use um seletor de tipo. Se você precisar selecionar todas as listas não ordenadas, use ul {}.

Visualizar Demonstração

Compatibilidade

• IE6+
• Firefox
• Chrome
• Safari
• Opera

6. X:visited e X:link

a:link { color: red; }
a:visted { color: purple; }

Nós usamos a pseudo-classe :link para selecionar todas as âncoras que foram clicadas.

Alternativamente, nós também temos a pseudo-classe :visited, que, como esperado, permite-nos aplicar uma estilização específica somente às âncoras da página que já foram clicadas ou visitadas.

Visualizar Demonstração

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7. X + Y

ul + p {
 color: red;
}

Esse é chamado de seletor adjacente. Ele selecionará somente o elemento imediatamente após o primeiro elemento. No exemplo acima, selecionará só o primeiro parágrado após cada ul na página, e fará que ele tenha a cor vermelha.

Visualizar Demonstração

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

8. X > Y

div#container > ul {
border: 1px solid black;
}

A diferença entre o seletor descendente X Y padrão e o seletor X > Y é que o último somente seleciona filhos diretos. Por exemplo, considere o código HTML abaixo.

 <div id="container">
    <ul>
       <li> Item da lista
         <ul>
            <li> Filho </li>
         </ul>
       </li>
       <li> Item da lista </li>
       <li> Item da lista </li>
       <li> Item da lista </li>
    </ul>
 </div>

Um seletor #container > ul somente selecionará aquelas uls que são filhas diretas de uma div com identificador nomeado como container. Ele não selecionará, por exemplo, a ul que é filha do primeiro li.

Por esse motivo, há benefícios relacionados a performances ao usar o combinador de filhos. Na verdade, é recomendável utilizá-lo quando estiver trabalhando com motores de seleção de CSS criados em JavaScript.

Visualizar Demonstração

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y

ul ~ p {
 color: red;
}

O seletor de irmão é parecido com o seletor X + Y, contudo, é menos restritivo. Enquanto o seletor adjacente (ul + p) só selecionará o primeiro elemento, imediatamente, após o elemento inicial, esse é mais generalista. Ele selecionará, usando o nosso exemplo acima, qualquer elemento p, desde que ele venha depois de um elemento ul.

Visualizar Demonstração

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10. X[title]

a[title] {
 color: green;
}

Chamado de seletor de atributos, no nosso exemplo acima, ele só selecionará aquelas âncoras com um atributo title. As âncoras que não tiverem esse atributo, não receberão esse estilo em particular. Mas, e se precisarmos ser mais específicos? Bem...

Visualizar Demonstração

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11. X[href="foo"]

a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}

O trecho acima estilizará todas as âncoras que apontem para o endereço http://net.tutsplus.com; eles serão estilizados com o verde do nosso site. Todas as outras âncoras não serão afetadas.

Atente que estamos envolvendo o valor entre aspas. Lembre-se de fazer isso quando estiver trabalhando com motores de seleção CSS criados em JavaScript. Quando possível, sempre use os seletores CSS3 ao invés dos métodos não oficiais.

Ele funciona muito bem, embora seja um tanto rígido. E se o link, realmente, direcionar para o Nettuts+, mas, o endereço usado seja o nettuts.com ao invés da URL completa? Para esses casos, podemos usar a sintaxe de expressões regulares.

Visualizar Demonstração

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12. X[href*="nettuts"]

a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}

Aqui está; é isso o que precisamos. O asterísco designa que o valor utilizado no seletor deve aparecer em algum lugar do valor do atributo do elemento. Assim, esse novo seletor cobre nettuts.com, net.tutsplus.com, e até o tutsplus.com.

Tenha em mente que ele é bem abrangente. E se a âncora apontar para algum site que não seja da Envato, mas que tenha em sua URL a cadeia de caracteres tuts? Quando precisar ser mais específico, use ^ e $, para referenciar o começo e o fim de uma cadeia de caracteres, respectivamente.

Visualizar Demonstração

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

13. X[href^="http"]

a[href^="http"] {
 background: url(path/to/external/icon.png) no-repeat;
 padding-left: 10px;
}

Você, alguma vez, já parou para pensar como alguns sites fazem para mostrar um pequeno ícone ao lado de alguns links que levam para outros sites? Tenho certeza que você já viu algo parecido antes; Eles são ótimos lembretes que o link em questão levará você para um site completamente diferente.

Isso é bem fácil de fazer, usando o acento circunflexo. Ele é, comumente, usado em expressões regulares para designar o começo de uma cadeia de caracteres. Se quisermos selecionar todas as âncoras que tem um atributo href que começam com http, nós poderíamos usar um trecho de código parecido com o que temos acima.

Atente que não estamos procurando por http://; isso é desnecessário e não leva em consideração as URLs que começam com https://.

Agora, e se quiséssemos estilizar todos os links que apontam, digamos, para uma foto? Nesses casos, temos de pesquisar pelo final da cadeia de caracteres.

Visualizar Demonstração

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

14. X[href$=".jpg"]

a[href$=".jpg"] {
 color: red;
}

Nós usaremos um símbolo de expressão regular, o $, para referenciar o final da cadeia de caracteres. Nesse caso, nós buscaremos por todas as âncoras que apontem para uma imagem – ou, pelo menos, uma URL que termine com .jpg. Lembre-se que isso não funcionará com gifs e pngs.

Visualizar Demonstração

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

15. X[data-*="foo"]

a[data-filetype="image"] {
 color: red;
}

Lembre-se do exemplo oito; como fazer para referenciar todos os tipos de imagens: png, jpeg,jpg e gif? Bem, poderíamos criar múltiplos seletores, dessa forma:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
 color: red;
}

Mas, isso é muito chato e ineficiente. Outra possível solução é usar atributos customizados. E se adicionarmos um atributo data-filetype a cada uma das âncoras que apontem para uma imagem?

<a href="path/to/image.jpg" data-filetype="image"> Link para Imagem</a>

Então, com esse gancho, podemos usar os seletores de atributo padrão para selecionar somente essas âncoras.

a[data-filetype="image"] {
 color: red;
}

Visualizar Demonstração

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

16. X[foo~="bar"]

 a[data-info~="external"] {
 color: red;
}

a[data-info~="image"] {
 border: 1px solid black;
}

Eis um seletor especial que impressionará seus amigos. Nem todo mundo sabe desse truque. O til (~) permite-nos selecionar um atributo que tem, em seus valores, uma lista separada por espaços.

Seguindo com o nosso atributo customizado do seletor quinze, poderíamos criar um atributo data-info, que pode receber uma lista de itens, separados por espaço, para podermos anotar o que quisermos. Nesse caso, nós tomaremos nota dos links externos e dos links para imagens – só para exemplificar.

"<a href="path/to/image.jpg" data-info="external image"> Clique em mim </a>

Com esse código, agora podemos selecionar qualquer tag que tenha qualquer um desses valores, usando o truque do seletor de atributos com o ~.

/* Seleciona o atributo data-info que contem o valor "external" */
a[data-info~="external"] {
 color: red;
}

/* E aquele que contem o valor "image" */
a[data-info~="image"] {
border: 1px solid black;
}

Bem legal, hein?

Visualizar Demonstração

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

17. X:checked

input[type=radio]:checked {
 border: 1px solid black;
}

Essa pseudo-classe somente selecionará o elemento da interface que foi marcado como selecionado – como um botão radio ou checkbox. Simples assim.

Visualizar Demonstração

Compatibilidade

• IE9+
• Firefox
• Chrome
• Safari
• Opera

18. X:after

As pseudo-classes before e after são muito boas. Parece que, todos os dias, o pessoal encontra maneiras criativas e efetivas de usá-las. Elas, simplesmente, geram conteúdo ao redor do elemento selecionado.

Vários aprenderam sobre eles quando foram encontrar o hack do ajuste dos floats (alguns conhecem como clear-fix hack).

.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
  }

.clearfix {
 *display: inline-block;
 _height: 1%;
}

Esse hack usa a pseudo-classe :after para adicionar um espaço após o elemento e, então, limpa-lo. É um ótimo truque para se ter em seu cinto de utilidades, principalmente quando a técnica do overflow: hidden; não é possível ser utilizada.

Para outros usos criativos dessa técnica, veja meu guia rápido sobre como criar sombras.

De acordo com a especificação dos Seletores CSS3, você deveria, tecnicamente, usar a sintaxe dos pseudo-elementos de dois "dois pontos", ::. Entretanto, para manter-se compatível, o navegador aceita o uso com um único "dois pontos". Na verdade, é melhor você usar a versão com um único "dois pontos" em seus projetos.

Compatibilidade

• IE8+
• Firefox
• Chrome
• Safari
• Opera

19. X:hover

div:hover {
background: #e3e3e3;
}

Vamos lá. Você já conhece esse. O termo oficial para esse seletor é pseudo-classe de ação do usuário. Pode parecer confuso, mas não é. Quer adicionar algum estilo específico ao passar o mouse sobre algum elemento? Esse seletor dará conta do recado!

Tenha em mente que versões antigas do Inter Explorer não respondem quando a pseudo-classe :hover é aplicada a qualquer outra coisa que não seja uma âncora (a).

Você, geralmente, selecionará esse seletor quando for aplicar, por exemplo, um border-bottom a âncoras quando passar o mouse sobre o link.

a:hover {
 border-bottom: 1px solid black;
}

Dica - border-bottom: 1px solid black; é bem melhor que usar text-decoration: underline;.

Compatibilidade

• IE6+ (In IE6, :hover must be applied to an anchor element)
• Firefox
• Chrome
• Safari
• Opera

20. X:not(selector)

div:not(#container) {
 color: blue;
}

A pseudo-classe negação é, particularmente, útil. Digamos que você queira selecionar todas as divs, exceto por aquelas que contenham um identificador nomeado de container. O trecho acima lida com essa tarefa, perfeitamente.

Ou, se eu quisesse selecionar todos os elementos (o que não é recomendado), exceto pelas tags de parágrafo, poderíamos fazer assim:

*:not(p) {
color: green;
}

Visualizar Demonstração

Compatibilidade

• IE9+
• Firefox
• Chrome
• Safari
• Opera

21. X::pseudoElemento

p::first-line {
 font-weight: bold;
 font-size: 1.2em;
}

Nós podemos usar pseudo-elementos (designados por ::) para estilizar fragmentos de um elemento, como a primeira linha ou uma primeira letra. Lembre-se que essa regra precisa ser aplicada a elementos do tipo bloco para surtirem efeito.

Um pseudo-elemento é composto por dois "dois pontos": ::

Selecione a Primeira Letra de um Paraágrafo

p::first-letter {
 float: left;
 font-size: 2em;
 font-weight: bold;
 font-family: cursive;
 padding-right: 2px;
}

Esse trecho encontrará os parágrafos de uma página e, então, buscará só a primeira letra de cada um desses elementos para aplicar o estilo.

Isso é, geralmente, usado para criar estilos que remotem à estilização que jornais aplicam à primeira letra de um artigo.

Selecione a Primeira Linha de um Parágrafo

p::first-line {
 font-weight: bold;
 font-size: 1.2em;
}

De forma semelhante, o pseudo-elemento ::first-line irá, como esperado, estilizar, somente, a primeira linha do elemento em questão.

"Para manter a compatibilidade com as folhas de estilos existentes, os navegadores devem, também, aceitar a notação anterior, com um 'dois pontos', introduzida nas especificações CSS nível 1 e 2 (precisamente, :first-line, :first-letter, :before e :after). Essa compatibilidade não é permitida para os novos pseudo-elementos nesta especificação." - Fonte

Visualizar Demonstração

Compatibilidade

• IE6+
• Firefox
• Chrome
• Safari
• Opera

22. X:nth-child(n)

li:nth-child(3) {
 color: red;
}

Você se lembra quando tinha de indicar um elemento específico de um conjunto de elementos? a pseudo-classe nth-child acaba com esse problema!

Atente que o nth-child aceita um número inteiro como parâmetro, entretanto, a contagem não inicia em zero (como nas arrays e strings em programação). Se você deseja selecionar o segundo item de uma lista, faça assim li:nth-child(2).

Nós podemos, até mesmo, selecionar um número variável de elementos filhos. Por exemplo, nós podemos fazer algo como li:nth-child(4n), para selecionar todos os itens que estejam em uma posição que seja múltipla de quatro.

Visualizar Demonstração

Compatibilidade

• IE9+
• Firefox 3.5+
• Chrome
• Safari

23. X:nth-last-child(n)

li:nth-last-child(2) {
 color: red;
}

E se tivéssemos uma enorme lista de itens em uma ul e só precisássemos acessar o terceiro item, começando a contagem a partir do último elemento? Ao invés de fazer algo como li:nth-child(397), você pode usar a pseudo-classe nth-last-child.

Essa técnica funciona quase igual à técnica dezesseis, entretanto, a diferença é que ela começa do último elemento do conjunto e faz o caminho inverso até o primeiro elemento.

Visualizar Demonstração

Compatibilidade

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {
 border: 1px solid black;
}

Haverá vezes que, ao invés de selecionar um elemento filho, você precisará de um certo elemento de um certo tipo.

Imagine um código que contenha cinco listas não ordenadas. Se você quiser estilizar, somente, a terceira ul e não tem um identificador para usar, você pode usar a pseudo-classe nth-of-type(n). No trecho acima, somente a terceira ul terá uma borda.

Visualizar Demonstração

Compatibilidade

• IE9+
• Firefox 3.5+
• Chrome
• Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
 border: 1px solid black;
}

E, sim, para manter a consistência, nós também podemos usar a pseudo-classe nth-last-of-type para iniciar a contagem dos seletores pelo fim da lista e fazer o caminho inverso até o elemento desejado.

Compatibilidade

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

26. X:first-child

ul li:first-child {
 border-top: none;
}

Essa pseudo-classe estrutural permite-nos selecionar o primeiro elemento do conjunto alvo. Você, geralmente, usará essa técnica para remover bordas dos primeiros e últimos elementos de listas.

Por exemplo, digamos que você tem uma lista e cada item dessa lista tem border-top e border-bottom. Bem, com esse arranjo, o primeiro e último elementos parecerão um pouco estranhos.

Muitos projetistas aplicam classes chamadas primeira e última para compensar isso. Para evitar esse tipo de coisa, você pode usar essa pseudo-classe.

Visualizar Demonstração

Compatibilidade

• IE7+
• Firefox
• Chrome
• Safari
• Opera

27. X:last-child

ul > li:last-child {
 color: green;
}

O seletor oposto ao first-child, o last-child, selecionará o último item do conjunto alvo.

Exemplo

Vamos construir um exemplo simples para demonstrar um dos possíveis usos dessas pseudo-classes. Criaremos uma lista estilizada.

Markup

<ul>
   <li> Item da Lista </li>
   <li> Item da Lista </li>
   <li> Item da Lista </li>
</ul>

Nada especial, aqui. Só uma lista simples.

CSS

ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}

li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

Esse estilo trabalhará o plano de fundo (background), removerá o preenchimento padrão (padding) que o navegador atribui à ul e aplica as bordas a cada elemento li para criar um ar de profundidade.

Para criar um ar de profundidade às suas listas, aplique uma cor à border-bottom a cada li, com um ou dois tons mais escuros que a cor do plano de fundo do li. Depois, aplique uma cor à border-top que seja um ou dois tons mais claros.

O único problema, como mostrado na imagem acima, é que uma borda será aplicada à parte de cima e à parte de baixo da lista desordenada – o que é estranho. Vamos usar as pseudo-classes :first-child e :last-child para ajustar isso.

li:first-child {
  border-top: none;
}

li:last-child {
 border-bottom: none;
}

E é isso. Resolvemos!

Visualizar Demonstração

Compatibilidade

• IE9+
• Firefox
• Chrome
• Safari
• Opera

SIM – o IE8 dá suporte ao :first-child, mas não ao :last-child. Vai entender.

28. X:only-child

div p:only-child {
 color: red;
}

Francamente, você, provavelmente, não usará muito a pseudo-classe only-child. De qualquer modo, ela existe para o caso de você precisar.

Ela permite que você selecione aqueles elementos que são os únicos filhos de um certo elemento. Levando em consideração o trecho acima, somente o parágrafo que for o único filho de uma div ficará colorido de vermelho.

Vamos assumir que seja esse o nosso HTML.

<div><p> Meu parágrafo aqui. </p></div>

<div>
 <p> Dois parágrafos no total. </p>
 <p> Dois parágrafos no total. </p>
</div>

Nesse caso, os parágrafos da segunda div não serão afetados; somente os da primeira div. Assim que você inserir mais de um elemento filho nessa div, a pseudo-classe only-child deixará de funcionar.

Visualizar Demonstração

Compatibilidade

• IE9+
• Firefox
• Chrome
• Safari
• Opera

29. X:only-of-type

li:only-of-type {
 font-weight: bold;
}

Essa pseudo-classe estrutural pode ser usada de algumas formas bem interessantes. Ela selecionará elementos que não tem nenhum elemento irmão dentro do elemento pai. Como exemplo, selecionemos todas as uls que tem somente um único li.

Primeiro, pergunte-se como você resolveria isso. Você poderia usar o ul li, mas, ele selecionaria todos os itens da lista. A única solução é usar a pseudo-classe only-of-type.

ul > li:only-of-type {
 font-weight: bold;
}

Visualizar Demonstração

Compatibilidade

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

30. X:first-of-type

A pseudo-classe first-of-type permite que você selecione o primeiro irmão de um conjunto de elementos do mesmo tipo.

Um Teste

Para entender melhor, façamos um teste. Copie o código abaixo em seu editor de códigos:

<div>
 <p> Meu parágrafo aqui. </p>
 <ul>
    <li> Item 1 da Lista </li>
    <li> Item 2 da Lista </li>
 </ul>

 <ul>
    <li> Item 3 da Lista </li>
    <li> Item 4 da Lista </li>
 </ul>
</div>

Agora, sem continuar lendo, descubra como selecionar somente o "Item 2 da Lista". Quando descobrir (ou desistir), continue a leitura.

Solução 1

Há várias maneira de resolver esse teste. Nós usaremos alguns deles. Primeiro, usando o first-of-type.

ul:first-of-type > li:nth-child(2) {
 font-weight: bold;
}

Esse trecho de código, essencialmente, diz "encontre a primeira lista não ordenada na página, então encontre somente os filhos imediatos dessa lista e que são "itens de lista". Depois, filtre esses itens e pegue somente o segundo.

Solução 2

Outra opção seria usar o seletor adjacente.

p + ul li:last-child {
 font-weight: bold;
}

Nesse cenário, nós encontramos a ul que está, imediatamente, após um p, e, então, encontramos o último item desse elemento.

Solução 3

Nós podemos ser bem desagradáveis ou brincalhões o quanto quisermos com esses seletores.

ul:first-of-type li:nth-last-child(1) {
 font-weight: bold;
}

Dessa vez, nós pegamos o primeiro elemento ul da página e, então, encontramos o primeiro item da lista, na ordem reversa dos itens! :)

Visualizar Demonstração

Compatibilidade

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

Conclusão

Se você tem de lidar com navegadores antigos, como o Internet Explorer 6, você ainda tem de tomar cuidado com esses novos seletores. Porém, não deixe isso deter seu aprendizado. Você estaria fazendo um desserviço a você mesmo. Tenha certeza de visualizar a lista de compatibilidade com os navegadores. Alternativamente, você pode usar o excelente script IE9.js do Dean Edward, para permitir que esses seletores sejam usados em navegadores.

Segundo, quando for trabalhar com bibliotecas, como a popular jQuery, sempre use os seletores nativos do CSS3 ao invés dos métodos/seletores customizados da biblioteca, sempre que possível. Isso fará seu código mais performático, uma vez que o motor de seleção poderão usará o analisador nativo do navegador, ao invés do seu próprio.

Obrigado por ler! Espero que tenha aprendido uma ou dois truques!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!