CSS3: seletores e pseudo-elementos

Por / Front-End /

Entre os novos recursos que o CSS3 nos traz, figuram entre os meus favoritos os novos seletores e pseudo-elementos, que fornecem melhor qualidade, controle e consistência visual para os layouts. Esses recursos já são suportados pela maioria dos navegadores em uso (você pode conferir o suporte dos navegadores em http://caniuse.com/). Para o suporte no Internet Explorer, você pode utilizar ferramentas como o IE7-js ou o :select[ivizr].

Bom, vamos ao que interessa, a prática 😉

CSS3 selectors: first-child e last-child

Os seletores :first-child e :last-child do CSS3 nos permitem formatar apenas o primeiro ou o último elemento dentro de uma sequência. Vejamos os exemplos abaixo.

section {
	width: 800px;
	overflow: auto;
	margin: 0 auto;
}

div {
	width: 100px;
	height: 100px;
	background-color: #333;
	margin: 20px;
	float: left;
}

div:first-child {
	background-color: #900;
	margin-left: 0px;
}

div:last-child {
	background-color: #006;
	margin-right: 0px;
}
<section>
   
 

   
 

   
 

   
 

   
 

   
 

</section>

first-child-e-last-child No exemplo acima vimos que utilizando os seletores e conseguimos dar uma cor e uma margem diferentes para o primeiro e último elemento. Na imagem que vemos, as margens estão representadas pela cor laranja.

CSS3 selector: nth-child

Com o seletor nth-child do CSS3 nós podemos aplicar uma formatação a diferentes elementos de acordo com um determinado intervalo. Você pode testar diferentes resultados na aplicação do através do site css-tricks.com/examples/nth-child-tester. Vejamos os diferentes exemplos:

div:nth-child(odd) {
   background-color: #900;
}

nth-child-1

div:nth-child(3n) {
   background-color: #900;
}

nth-child-2

div:nth-child(3) {
   background-color: #900;
}

nth-child-3

div:nth-child(3n+2) {
   background-color: #900;
}

nth-child-4

div:nth-child(6n+4) {
   background-color: #900;
}

nth-child-5

Podemos ver um exemplo de uso do seletor :nth-child no site swwweet.com. Veja abaixo o código utilizado no site.

<section id="recent-projects">
    <h2>Recent projects</h2>
    <ul>
	<li>
	    <a href="portfolio.html#amitad">
		<img src="img/home-sshot1.jpg"
		alt="Screenshot of Amitad.com">
		<h3>Amitad</h3>
	    </a>
	</li>
	<li>
	    <a href="portfolio.html#avsp">
		<img src="img/home-sshot2.jpg"
		alt="Screenshot of AVSP">
		<h3>Asoc. Vasca de Sociología</h3>
            </a>
	</li>
	<li>
	    <a href="portfolio.html#freelancebcn">
		<img src="img/home-sshot3.jpg"
		alt="Screenshot of freelance bcn">
		<h3>{freelance:bcn}</h3>
	    </a>
	</li>
    </ul>
</section>
#recent-projects li:nth-child(2){
   margin: 0 13px;
}

nth-child-exemplo

CSS3 selectors: target

O seletor target do CSS3 nos permite aplicar uma formatação ao elemento que é alvo ativo de um link. Abaixo podemos ver o exemplo de como funciona o :target, e você pode ver o funcionamento do exemplo aqui.

<nav>
    <a href="#um" title="ir para o quadro 1">Um</a>
    <a href="#dois" title="ir para o quadro 2">Dois</a>
    <a href="#tres" title="ir para o quadro 3">Três</a>
</nav>


Quadro 1


Quadro 2


Quadro 3
nav { margin: 10px; }

nav a {
    padding: 10px;
    font-family: Arial, sans-serif;
}

div {
    width: 300px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    padding: 10px;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 16px;
    position: absolute;
    top: 100px;
    left: 20px;
    z-index: 1;
}

div#um { background-color: #009; }
div#dois { background-color: #060; }
div#tres { background-color: #900; }

div:target { z-index: 1000; }

No exemplo acima, existem três blocos diferentes, sobrepostos pelo posicionamento absoluto. Cada um dos links possui em seu atributo uma âncora para cada um dos blocos. Ao clicar em um dos links, o seletor aplica a propriedade ao bloco correspondente, fazendo com que ele se sobreponha aos demais.

CSS3 selectors: attribute

No CSS3 também é possível formatarmos elementos que possuam um atributo específico. Existem diferentes variações e combinações de seletores de atributos, como você pode ver no exemplo abaixo:

a[title] {color: red;}
a[href="index.html"] {color: red;}
img[alt*="web"] {border: 5px solid red;}
a[href$=".pdf"] {background: url(pdf.png)}

Vamos ver o exemplo de uma aplicação prática desse tipo de seletor.

<section>
    
1

    
2

    
3

    
4

    
5

    
6

</section>
div {
    width: 100px;
    height: 100px;
    background-color: #333;
    margin: 10px;
    float: left;
    line-height: 100px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
}

div[title] {
    background-color: #900;
}

attribute

Pseudo-elementos do CSS3

Pseudo-elementos servem para adicionar efeitos a um seletor ou parte dele. A seguir, veremos dois pseudo-elementos do CSS3 muito úteis: :before e :after.

:before

O pseudo-elemento :before do CSS3 serve para adicionar alguma formatação ou conteúdo antes de um elemento. Vejamos o exemplo a seguir:

<ul>
    <li>Design para a Internet: Projetando a Experiência Perfeita</li>
    <li>Não Me faça Pensar</li>
    <li>Construindo Sites com CSS e (X)HTML</li>
    <li>jQuery: A Bíblia do Programador JavaScript</li>
    <li>Use a Cabeça HTML com CSS e XHTML</li>
</ul>
li {
   font-family: Arial, sans-serif;
   line-height: 200%;
   color: #333;
   list-style: none;
}

li:before {
   content: "Livro: ";
   color: #D35529;
   font-weight: bold;
}

before

:after

Por sua vez, o pseudo-elemento :after do CSS3 serve para adicionar alguma formatação ou conteúdo após um elemento. Vejamos o exemplo a seguir:

<ul>
    <li rel="timao">Emerson Sheik</li>
    <li rel="timao">Danilo</li>
    <li rel="tricolor">Luis Fabiano</li>
    <li rel="tricolor">Jadson</li>
</ul>
li {
   font-family: Arial, sans-serif;
   line-height: 200%;
   color: #333;
   list-style: none;
}

li:after {
   color: #D35529;
   font-weight: bold;
}

li[rel="timao"]:after {
   content: " é jogador do Corinthians.";
}

li[rel="tricolor"]:after {
   content: " é jogador do São Paulo.";
}

after

No site freelancecorner.org podemos ver um exemplo da aplicação de ambos os pseudo-elementos mostrados, aplicados ao elemento <ul id=”contact”>, que está dentro do elemento <section id=”signin”>. Veja:

#signin #contact:before {
   content: "{";
   font-family: 'Yanone Kaffeesatz',Arial,Helvetica,sans-serif;
   font-size: 15em;
   color: #BE3F9E;
   position: absolute;
   top: 4.5%;
   left: -100px;
}

#signin #contact:after {
   content: "}";
   font-family: 'Yanone Kaffeesatz',Arial,Helvetica,sans-serif;
   font-size: 15em;
   color: #BE3F9E;
   position: absolute;
   top: 4.5%;
   right: -100px;
}

before-after

Posts relacionados

Rolar para cima