CSS3 Selectors: Conhecendo os seletores do CSS3

Com a chegadas das CSS3, aplicar estilos a elementos individualmente se tornou muito mais f�cil. Os novos seletores permitem identificar elementos com base em seus atributos, posiç�o em que aparecem no �elemento pai�, estado (habilitado/desabilitado), entre outros.

Teremos aqui uma vis�o geral sobre estes seletores e, em seguida, veremos exemplos pr�ticos de uso deles.

Seletores CSS por atributos

Estes seletores permitem aplicar uma determinada formataç�o a certos elementos com base no valor de um atributo. Por exemplo, pode-se selecionar todos os elementos <div> que contenham a palavra barra no seu id (para barras superiores, inferiores, e laterais, por exemplo).

Podemos selecionar os elementos cujo valor do atributo seja EXATAMENTE, COMECE COM, TERMINE COM ou CONTENHA o valor buscado. Vejamos a seguir a sintaxe:

E[atributo="valor"]: elementos do tipo E cujo atributo seja igual a valor.
E[atributo^="valor"]: elementos do tipo E cujo valor do atributo comece com a palavra valor.
E[atributo$="valor"]: elementos do tipo E cujo valor do atributo termine com a palavra valor.
E[atributo*="valor"]: elementos do tipo E cujo valor do atributo contenha a palavra valor.

Vejamos, na pr�tica, o funcionamento destes seletores. Para isso, devemos alterar o conte�do do arquivo seletores.css conforme a Listagem 2.

Para os exemplos seguintes, utilizaremos um arquivo HTML com a estrutura da Listagem 1.


<html>
    <head>
        <link rel="stylesheet" type="text/css" href="seletores.css"/>
        <style>
            div{border:solid 1px;}
            #cabecalho{height:100px;}
            #corpo{height:300px;}
            #rodape{height:100px;}
        </style>
    </head>
    <body>
        <div id="cabecalho">cabecalho</div>
        <div id="corpo">
            <div id="parte_superior">parte superior</div>
            <div id="parte_inferior">parte inferior</div>
        </div>
        <div id="rodape">rodape</div>       
    </body>
</html>

Listagem 1. Estrutura do arquivo HTML para o primeiro exemplo

Definimos uma formataç�o inicial apenas para dar forma � p�gina e facilitar a visualizaç�o do estilo que ser� posteriormente aplicado. A p�gina deve ter uma apar�ncia semelhante � da Figura 1.

Figura 1. Apar�ncia inicial da p�gina de exemplo


div[id="cabecalho"]{
    font-size:xx-large;
}

div[id^="parte"]{
    height:50%;
}

div[id$="inferior"]{
    background:#87CEEB;
}

div[id*="roda"]{
    background:red;
}

Listagem 2. Exemplo de CSS para seletores por atributo

Ap�s a aplicaç�o do c�digo da Listagem 2, a p�gina deve estar como na Figura 2.

Figura 2. P�gina ap�s aplicaç�o dos seletores por atributo

Seletores CSS por posiç�o

Estes seletores funcionam com base na posiç�o do elemento no documento ou no controle que o cont�m (elemento pai). Por exemplo, podemos selecionar o segundo elemento contido dentro de uma div, independente do seu tipo.

:root: seleciona o elemento raiz do documento, no caso, � a tag HTML.
E:nth-child(N): seleciona o elemento do tipo E que seja o N-�simo filho do seu elemento pai.
E:nth-last-child(N): semelhante ao anterior, mas começando a contagem de baixo para cima.
E:nth-of-type(N): seleciona o elemento que seja o N-�simo do seu tipo.
E:nth-last-of-type(N): semelhante ao anterior, mas contando de baixo para cima.
E:last-child: seleciona o elemento E que seja o �ltimo filho do elemento pai.
E:first-of-type: seleciona o elemento E que seja o primeiro de seu tipo dentro do elemento pai.
E:last -of-type: semelhante ao anterior, mas com o �ltimo elemento.
E:only-child: seleciona o elemento E que seja o �nico filho do seu elemento pai.
E:only-of-type: seleciona o elemento que seja o �nico filho deste tipo dentro de seu elemento pai.

Para visualizar o funcionamento dos seletores por posiç�o, utilizaremos a seguinte estrutura HTML da Listagem 3.


<html>
    <head>
        <link rel="stylesheet" type="text/css" href="seletores.css"/>
        <style>
            div{border:solid 1px; height:100px;}
        </style>
    </head>
    <body>
        <div id="barra_1"></div>
        <div id="barra_2">
            <p>Paragrafo 1</p>
            <p>Paragrafo 2</p>          
        </div>    
        <div id="barra_3">
            <ul>
                <li>item 1</li>
                <li>item 1</li>
                <li>item 1</li>
            </ul>
        </div>
        <div id="barra_4">
            <p>Paragrafo 3</p>
        </div>
    </body>
</html>

Listagem 3. Estrutura do arquivo HTML para o segundo exemplo

A p�gina deve ser, inicialmente, como ilustra a Figura 3.

Figura 3. Apar�ncia inicial da p�gina no segundo exemplo

Agora, alteraremos o conte�do do arquivo seletores.css de acordo com a Listagem 4.

div:nth-child(1){
    background:red;
}

div:nth-last-child(2){
    background:#AB82FF;
}

li:nth-of-type(1){
    color:green;
}

li:nth-last-of-type(1){
    color:yellow;
}

div:last-child{
    background:orange;
}

div:first-of-type{
    border:solid 5px green;
}

div:last-of-type{
    border:solid 5px brown;
}

p:only-child{
    font-size:30px;
}

ul:only-of-type{
    text-decoration:underline;
}

Listagem 4. Exemplo de CSS para seletores por posiç�o

Ent�o, ap�s aplicado o c�digo da Listagem 4, a p�gina deve estar semelhante � Figura 4.

Figura 4. P�gina ap�s aplicaç�o dos seletores por posiç�o

Seletores CSS por estado

Estes, por sua vez, funcionam com base no estado atual do controle (vazio, habilitado, desabilitado etc.). A seguir, cada um � explicado, facilitando o entendimento.

E:empty: seleciona o elemento E que esteja vazio, sem nenhum elemento filho.
:target: seleciona o objeto alvo de um link interno (aqueles que s�o precedidos por # e que direcionam o usu�rio para um elemento na p�gina).
E:enabled: seleciona o elemento E que esteja habilitado para o usu�rio
E:disabled: semelhante ao anterior, mas para elementos desabilitados.
E:checked: seleciona elementos que estejam marcados (radios e checkboxes).
::selection: formata o conte�do selecionado pelo usu�rio.
:not(P): seleciona os elementos que n�o atendem ao seletor simples P.
E~F: seleciona todo elemento F que seja precedido por um elemento E.

Veremos, a seguir, alguns exemplos de uso destes seletores. Para isso, usaremos a estrutura HTML da Listagem 5.


<html>
    <head>
        <link rel="stylesheet" type="text/css" href="seletores.css"/>
        <style>
            div{border:solid 1px; height:100px;}
        </style>
    </head>
    <body>
        <h1>Selecione esse texto</h1>
        <p><a href="#Texto1">Link para o Texto 1</a></p>
        <p><a href="#Texto2">Link para o Texto 2</a></p>
        <div>         
            <p id="Texto1">Esse e o TEXTO 1</p>
            <p id="Texto2">Esse e o TEXTO 2</p>
        </div>
        <div id="divVazia"></div>
        <div>
            <span>Span antes do input</span><br/>
            <input type="checkbox" checked="checked" value="Opcao 1">Opcao 1
            <input type="checkbox"  value="Opcao 2">Opcao 2   
            <input type="text" disabled="disabled" value="desabilitado"/>
            <input type="text" value="habilitado"/><br/>
            <span>Span apos o input</span>
        </div>
    </body>
</html>

Listagem 5. Estrutura do arquivo HTML para o terceiro exemplo

A p�gina deve ter o layout da Figura 5.

Figura 5. Apar�ncia inicial da p�gina no terceiro exemplo

E novamente alteraremos o conte�do do arquivo seletores.css, desta vez conforme a Listagem 6.


:target{
    color:green;
    font-weight:bold;
}

::selection{
    color:red;
}

:empty{
    border:solid 1px;
    height:50px;
    background:gray;
}

input:checked{
    width: 40px;
}

h1
{
    font-family:"Courier New";
}

:not(h1)
{
    font-family:"Arial";
}

input~span{
    color: orange;
}

input:disabled{
    border:solid 1px red;
    background-color: silver;
    height:25px;
}

input:enabled{
    border:solid 1px blue;
    background-color: #fff;
    height:25px;
}

Listagem 6. Exemplo de CSS para seletores por estado

Feito isso, a p�gina dever� assumir a forma ilustrada da Figura 6.

Figura 6. P�gina ap�s aplicaç�o dos seletores por estado

Como pudemos ver, os diversos seletores das CSS3 nos permitem acessar facilmente controles espec�ficos em nossa estrutura HTML, facilitando, por exemplo, a formataç�o condicional destes elementos.

Saiu da DevMedia!

Minha primeira aplicaç�o C#:
C# � uma linguagem orientada a objeto com a qual podemos criar aplicaç�es desktop, mobile e web. Para dar in�cio ao seu aprendizado, trabalharemos em uma aplicaç�o pr�tica que ser� constru�da passo a passo, utilizando estruturas b�sicas do C# atrav�s do cen�rio de uma aplicaç�o que pode calcular o signo do usu�rio de acordo com seu dia e m�s de nascimento.
O que � AJAX?:
Neste curso falaremos sobre o AJAX, t�cnica que foi uma revoluç�o na web e permitiu construir aplicaç�es que alteram apenas trechos espec�ficos da p�gina para exibir os dados recebidos do servidor.
Code Smells - Conheça antes que seja tarde:
Voc� j� olhou para um c�digo que parecia errado, mas n�o soube dizer de imediato o porqu�. Pode ser que voc� tenha se deparado com um Code Smell e, acredite, se voc� n�o se livrar dele, esse inc�modo ficar� cada vez pior. Quer saber mais? Assista

Saiba mais sobre CSS ;)

Guia Completo de CSS:
Nesse Guia de Consulta voc� encontrar� o conte�do que precisa para iniciar seus estudos em CSS, recurso fundamental para a construç�o de p�ginas web.
Como criar sua primeira p�gina com CSS:
Neste curso usaremos a linguagem CSS para customizar a apar�ncia de uma p�gina HTML. Para isso, usaremos um documento HTML separado em �reas, sendo elas cabeçalho, bloco de conte�do principal e um rodap�.
O que � CSS?:
Neste curso vamos conhecer o CSS (Cascading Style Sheets - ou Folhas de Estilos em Cascatas), uma linguagem declarativa, amplamente usada na programaç�o web, e que tem como objetivo definir a formataç�o visual de documentos estruturados, como HTML.