Entre em Contato

(43) 999-576-125 Formulário de Contato Skype: alanpatrickk

10 seletores de CSS que todo Desenvolvedor Front-End deve conhecer

Começando a minha serie aqui de dicas e tutoriais, hoje apresento pra vocês um artigo muito interessante que encontrei no site Código Fonte esses dias. Sempre que tenho um tempinho eu procuro dicas e coisas sobre meu trabalho que possam me ajudar a melhorar meus serviços e essas dicas que mostrarei a seguir já foram muito úteis pra resolução de vários problemas que surgiram. Então vamos lá…

A dica de hoje será sobre seletores de CSS comuns. Com a chegada do CSS3 muita coisa interessante surgiu e muita funcionalidade útil apareceu, porém, o bom e velho CSS2 possui também muita coisa interessante pouco conhecido por grande parte dos desenvolvedores. O uso dos seletores a seguir poderá agilizar muito o seu trabalho e deixar tudo mais organizado. Entenda como eles funcionam e decore para uso em futuros projetos.

*

O seletor * (asterisco) é possivelmente o mais conhecido da lista, mas isto não quer dizer que ele seja usado com a frequência que merece. Empregado isoladamente, ele pode especificar um estilo geral que abrange todos os elementos da página, ideal para resetar propriedades ou estabelecer padrões, como a fonte em uso no site.

Exemplo:

* {
    margin: 0;
    padding: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 16px;
}


A + B

Este seletor é chamado de seletor adjacente e o que ele faz é aplicar o estilo ao elemento B que vem imediatamente depois do elemento A.

Por exemplo, se você deseja selecionar o primeiro parágrafo após um título, você utilizaria:

h2 + p {
    font-weight: bold;
}

E o resultado seria:

<h2>Título</h2>
<strong><p>Este parágrafo fica em negrito.</p></strong>
<p>O seletor não se aplica ao segundo parágrafo.</p>


A > B

Este seletor aplica o estilo somente aos filhos diretos de A, ao contrário do mais famoso A B, que seleciona todos os níveis de filhos de A. Este seletor é recomendado quando você deseja criar um estilo apenas para o primeiro nível dos filhos de um determinado elemento.

Por exemplo, se você não deseja selecionar os elementos da sublista de uma lista principal, você deve empregar:

ul > li {
    font-weight: bold;
}

E o resultado seria:

<ul>
    <li><strong>Item em negrito</strong>
        <ul>
            <li>Item da sublista</li>
            <li>Item da sublista</li>
            <li>Item da sublista</li>
        </ul>
    </li>
    <li><strong>Item em negrito</strong></li>
    <li><strong>Item em negrito</strong></li>
</ul>

Se você tivesse optado pelo seletor ul li , os itens da sublista também teriam ficado em negrito.


a[href*=”exemplo”]

Este seletor é uma carta na manga para quando você precisa que um determinado link tenha um estilo diferente dos outros. O seletor irá comparar o valor do atributo HREF com a string entre aspas e verificar se ela está presente antes de aplicar o estilo.

Por exemplo, para gerar um estilo para todos os links de uma página que levam para o Facebook:

a[href*="facebook"] {
   font-weight: bold;
}

E o resultado seria:

<strong><a href="http://www.facebook.com">Este link fica em negrito.</a></strong>
<a href="http://www.google.com">O seletor não se aplica a este link.</a>

Se você remover o * (asterisco) do seletor, ele irá procurar o valor exato da string na URL do link.


A:not(B)

Este seletor adiciona uma exceção ao elemento A. Na prática, o estilo é aplicado a todos os elementos A, exceto aqueles que sejam B.

Por exemplo, se você quer selecionar todas as divs de uma página, menos aquela que fica no rodapé, você pode usar:

div:not(.footer) {
    font-weight: bold;
}

E o resultado seria:

<strong><div>Esta div fica em negrito.</div>
<div>Esta div fica em negrito.</div>
<strong><div>Esta div fica em negrito.</div>
</strong></strong><div class="footer">Esta div não fica em negrito.</div>


A:first-child / A:last-child

Estes dois seletores permitem especificar o primeiro e o último filho de um elemento pai, respectivamente. Este seletor pode ser de uma ajuda inestimável para aplicar estilos ao primeiro item de uma lista, para remover margens de itens com float, para especificar bordas de colunas etc.

Por exemplo, para aplicar um estilo ao primeiro e ao último item de uma lista, nós usaríamos:

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

E o resultado seria:

<ul>
    <li><strong>Item em negrito</strong></li>
    <li>Item sem negrito</li>
    <li>Item sem negrito</li>
    <li><strong>Item em negrito</strong></li>
</ul>


A:nth-child(n)

Este seletor é uma variação do anterior, onde você especifica a posição do elemento filho dentro do elemento pai A.

Por exemplo, se você deseja selecionar apenas o terceiro item de uma lista, você pode usar:

ul li:nth-child(3) {
    font-weight: bold;
}

E o resultado seria:

<ul>
    <li>Item sem negrito</li>
    <li>Item sem negrito</li>
    <li><strong>Item em negrito</strong></li>
    <li>Item sem negrito</li>
</ul>

Nós também podemos usar este seletor para múltiplos daquela posição, aplicando a variável n no final do número.

Por exemplo, para selecionar os itens 3, 6, 9 e assim por diante de uma lista, nós usaríamos o seguinte CSS:

ul li:nth-child(3n) {
    font-weight: bold;
}


A:nth-last-child(n)

Este seletor é uma variação do anterior, onde a contagem de filhos começa do último.

Por exemplo, se você deseja selecionar apenas o antepenúltimo item de uma lista, você pode usar:

ul li:nth-last-child(3) {
    font-weight: bold;
}


A B:nth-of-type(n)

Este seletor pega o conceito de ordem estabelecido pelos seletores anteriores e mescla com tipos de elementos. Usando este seletor, você irá aplicar seu estilo ao elemento B que vem na posição n dentro do elemento A.

Por exemplo, para selecionar o terceiro parágrafo dentro de uma você usaria:

div p:nth-of-type(3) {
   font-weight: bold;
}

E o resultado seria:

<div>
    <p>O seletor não se aplica ao primeiro parágrafo.</p>
    <p>O seletor não se aplica ao segundo parágrafo.</p>
    <strong><p>Este parágrafo fica em negrito.</p>
    </strong><p>O seletor não se aplica ao quarto parágrafo.</p>
<div>


a:visited

Este talvez seja o mais antigo de todos os seletores vistos aqui. Tão antigo que já foi muito utilizado no passado e agora está quase completamente esquecido, gerando um problema sério de usabilidade…

Já reparou, ao fazer uma busca no Google, que as páginas que você já visitou aparecem com uma cor diferente? É exatamente isto o que este seletor faz.

Exemplo:

a:visited {
   color: blue;
}


Lembrando que esta é apenas uma explicação da lógica geral dos seletores. Você deverá usar sua criatividade pra implementar em seus projetos de forma que agilize seu trabalho futuro. No início pode parecer complicado, mas garanto que vai facilitar muito sua vida a longo prazo.

< Até a próxima, caro visitante! Forte abraço />