Selectores no CSS

CSSS_000.jpg

Para começar este artigo, a pergunta que se deve colocar primeiro é: O que é o CSS?
Resposta simples: O CSS é o que define a aparência e como se apresenta uma página num blogue ou site.

A pergunta seguinte, e para entrar no tema é: O que é um selector CSS?
Normalmente, um conjunto de regras CSS começa com um selector CSS, que é o que vai dizer aos navegadores qual o elemento no HTML ao qual esse conjunto de regras deve ser aplicado.

Os selectores CSS são incrivelmente versáteis e poderosos, permitindo aos Web designer controlar com precisão a forma como os elementos HTML são apresentados.
Os selectores CSS também são utilizados para direcionar elementos com base nas suas relações com outros elementos, permitindo aos programadores direcionar grupos inteiros de elementos HTML de uma só vez.

Isto permite que os desenvolvedores e criadores de websites ou blogues façam alterações globais numa linha de código, em vez de modificar manualmente cada elemento individualmente.
Os web developers podem personalizar facilmente a aparência de um website utilizando selectores CSS.

Resumindo, os selectores CSS ajudam-te a escolher quais o(s) elemento(s) HTML a aplicar os respectivos estilos.
Basicamente, são quem diz aos navegadores: "Apliquem estes estilos a estas partes da página".

A seguir, vou mostrar os principais tipos de selectores e como funcionam, mas como quero tentar explicar tudo duma maneira simples, vou dividir o artigo em algumas secções.
Por isso, para facilitar a navegação e leitura deste artigo, vou colocar aqui uma lista com ligações para cada secção:

  1. Selector universal (*)
  2. Selector de Elementos
  3. Selector de ID (#)
  4. Selector de class (.)
  5. Selector de Atributos
  1. Selector Filho (combinador)
  2. Selector Descendente
  3. Selectores Irmãos adjacentes e gerais
  4. Pseudo-classes
  5. Pseudo-elementos

  1. Selector universal (*)

    O selector universal é representado pelo símbolo asterisco (*), e selecciona todos os elementos de uma página, independentemente do seu tipo, classe ou ID.
    Isto significa que qualquer estilo CSS declarado utilizando o selector universal será aplicado a todos os elementos da página.

    Por exemplo, digamos que numa página temos vários tipos diferentes de elementos, como títulos, parágrafos, ligações e imagens.
    Se quisermos aplicar um estilo comum, digamos o tamanho da fonte (font-size), a todos estes elementos, pode utilizar o seletor universal assim:

    * {
  font-size: 15px;
}

    Esta regra CSS define que o tamanho da fonte será de 15 pixels para todos os elementos da página, incluindo títulos, parágrafos, ligações e imagens.

    Atenção que a utilização do selector universal pode ter um impacto negativo no desempenho do teu blogue, uma vez que selecciona todos os elementos da página.
    Por isso, é recomendável usá-lo com cautela e apenas quando necessário.

  2. Selector de Elementos

    O Selector de Elementos é também conhecido como selector de tipo, e selecciona os elementos HTML pelo seu nome.
    Este é um dos mais importantes entre os selectores CSS já que serve para estilizar uma etiqueta HTML sem uma class (.) ou ID (#).

    Este selector é utilizado para verificar quais os elementos que têm um nome de elemento idêntico e integrar estilos em cada um deles.
    Por exemplo, se quiseres dar estilos a todas as etiquetas </a> (ligações ou links) presentes na tua página, utiliza o selector de elementos da seguinte maneira:

    a {
  color: LightBlue;
  text-decoration: underline;
}

    Neste exemplo, todas as ligações vão aparecer na cor azul claro e com um sublinhado.

  3. Selector de ID (#)

    O Selector de ID é utilizado para estilizar um elemento HTML específico com um ID.
    Como um ID deve ser único numa página, é perfeito para direcionar um elemento específico.

    Basta utilizar o símbolo cardinal, #, antes do nome do ID, para escolher um elemento com esse ID que como já mencionei, deve ser único.
    Para o utilizares, começa com um símbolo cardinal (#) seguido do nome do ID escolhido:

    #parafunico {
  color: Red;
  font-size: 20px;
  font-style: italic;
}

    Esta regra diz aos navegadores que onde estiver o ID parafunico, o texto vai ter a cor vermelha, itálico, com o tamanho da fonte de 20 pixeis.
    Exemplo de como fica num parágrafo:

    <p id="parafunico">
Texto demonstrativo de como se apresenta um parágrafo com um ID único de nome parafunico com o estilo definido no CSS acima. 
</p>

    Texto demonstrativo de como se apresenta um parágrafo com um ID único de nome parafunico com o estilo definido no CSS acima.

  4. Selector de class (.)

    O Selector de class é um dos selectores mais úteis entre todos os selectores CSS.
    As class podem ser quantas quisermos numa página e em qualquer tipo de elemento, e todos os estilos que darmos a essa class se apresentarão em todos esses elementos que contenham essa class em comum.

    Outra vantagem das class é que cada elemento pode ter mais do uma class separadas por um espaço, e assim misturar os estilos conforme a ordem que sejam escritos no CSS.
    Para começar a escrever os estilos duma class no CSS, começamos com um ponto, ., antes do nome da class, e o navegador procura cada elemento que tenha esse nome.

    .destaque {
  color: red;
  font-weight: bold;
  background: yellow;
}

    A class acima procura cada elemento na página que a contém e diz que se deve apresentar com o texto em vermelho, em negrito e com um fundo amarelo.
    Exemplo dum paráfrafo e duma div com a class destaque, com uma span entre os dois elementos sem nenhuma:

        <p class="destaque">parágrafo com class "destaque".</p>
    <span>span sem nenhuma class.</span>
    <div class="destaque">div com a class "destaque".</div>

    paragrafo com class "destaque".

    span sem nenhuma class.
    div com a class "destaque".

  5. Selector de Atributos

    Os Selectores de Atributos estiliza os elementos HTML com base na presença ou no valor específico dos seus atributos.
    Oferecem uma forma de aplicar estilos que atendem a critérios de atributos específicos.

    Configura os atributos usando colchetes ([…]).
    O comportamento de um elemento web pode ser modificado utilizando os atributos para fornecer instruções específicas.

    Além disso, dão-nos mais poder para manipular os elementos através de JavaScript ou CSS e mais opções de como brincar com eles.
    Um selector de atributos CSS pode ser utilizado da seguinte forma:

    a[target="_blank"] {  
    background: lime;
}

    Utilizando o Selector de Atributos acima no CSS vai dizer aos navegadores que aquele estilo se aplica apenas a ligações com um atributo de destino (target) definido como "_blank".
    Este é um exemplo simples, mas podes utilizar os Selectores de Atributos para seleccionar elementos com base no valor dos seus atributos ou na presença de determinados atributos, e podes utilizá-los para selecionar um elemento específico com um valor específico de um atributo.

    Tabela de Selectores de Atributos
    Selector Exemplo Utilização
    [atributo] [target] São seleccionados elementos com o atributo especificado.
    [atributo=valor] [target="_blank"] Todos os elementos com o atributo target="_blank" são seleccionados.
    [atributo~=valor] [title~=exemplo] Selecciona todos os elementos com o atributo de nome title, o qual o valor é uma lista de palavras separadas por espaços, e uma dessas é exactamente "exemplo".
    [atributo|=valor] [lang|=pt] Selecciona todos os elementos com o atributo lang com um valor de atributo que é igual ao especificado (pt) ou que começa com o valor seguido de um hífen (pt-).
    [atributo^=valor] a[href^="https"] Selecciona elementos que têm um atributo cujo valor começa com o valor especificado.
    [atributo$=valor] img[src$=".png"] Selecciona todos os elementos que têm um atributo especificado cujo valor termina com o texto definido.
    [atributo*=valor] a[href*="cqapa"] Selecciona um elemento com um atributo de nome href no qual o valor contém ao menos uma ocorrência de cqapa em qualquer posição do atributo.
    [atributo operador valor i] [class*="qualQuer" i] Adicionando um i (ou I) antes do fechamento das chaves [], faz com que o valor seja comparado, independentemente da capitalização.

    NOTA: Em relação à capitalização ser ignorada pelo selector (Adicionando um i ou I), também temos uma forma de obrigar o selector a ser rigoroso com a maneira como o valor está escrito: 

    /* Ligações com "cQpA" em qualquer parte do URL, com capitalização exacta */
a[href*="cQpA" s] {
  color: orange;
}

    E já agora convém também referir como seleccionar um elemento pelos valores com que começa e com que termina:

    /* Ligações que começam por "https://" e terminam em ".org" */
a[href^="https://"][href$=".org"]
{
  color: green;
}

  6. Selector Filho (combinador)

    O Selector Filho é um selector CSS que é comparado com o selector descendente no CSS.
    Todos os elementos que são filhos de um elemento específico podem ser seleccionados com o Selector Filho.

    O segundo elemento necessita de ser filho do primeiro elemento para que este selector funcione.
    A família de selectores de combinação também abrange o Selector Filho, o que permite seleccionar e aplicar estilos a cada elemento que serve como filho de um elemento específico.

    Por exemplo, se existir uma lista (<ul>) com alguns itens e adicionares uma outra lista (<ol>) de itens dentro desses itens, e se quiseres estilizar somente esses itens... então a solução poderá ser o Selector Filho.
    Mas vamos a um exemplo prático:

    div > p {
  font-family: Arial; 
  font-size: 15px;
  color: red;
}

    No exemplo acima, o selector CSS é "div > p" e vai selecionar todos os elementos <p> que são filhos diretos de um elemento <div> na página e aplica os estilos especificados aos mesmos.

    <div>
<p>O Facebook é actualmente a rede social mais popular do mundo.</p>
<p>Ocupa a mente e o tempo das pessoas.</p>
<span>Quando dão por isso, já é tarde.</span>
<div>
<p>E depois é qua são elas.</p>
</div>
</div>

    O Facebook é actualmente a rede social mais popular do mundo.

    Ocupa a mente e o tempo das pessoas.

    Quando dão por isso, já é tarde.

    E depois é qua são elas.

    Neste exemplo, os dois primeiros elementos <p> que são filhos directos do elemento <div> têm uma fonte Arial, um tamanho de letra de 15px e uma cor vermelha.
    O elemento <span> e o elemento <p> dentro do <div> ao lado não são seleccionados por este selector CSS, pelo que não apresentam os estilos especificados.

  7. Selector Descendente

    Todos os elementos que são descendentes de um elemento específico são seleccionados pelo Selector Descendente.
    O termo "Descendente" significa estar em qualquer lugar numa estrutura de elementos no HTML.
    Continua a ser considerado um descendente, independentemente de ser um filho directo ou de estar numa posição mais profunda do que cinco níveis.

    O primeiro da família de selectores de combinação CSS é de facto o Selector Descendente.
    A sua sintaxe é composta pelo elemento que queremos seleccionar, precedido pelo elemento ascendente, separados por um espaço em branco.

    div p {
  font-family: Arial; 
  font-size: 15px;
  color: red;
}

    No exemplo acima, o selector CSS é "div p" e vai selecionar todos os elementos <p> que são descendentes de um elemento <div> na página e aplicar-lhes os estilos especificados.

    <div>
<p>Este é um parágrafo dentro de uma div.</p>
<p>Este é outro parágrafo dentro de uma div.</p>
<span>Este é um span dentro de uma div.</span>
<div>
<p>E este é um parágrafo dentro de uma div aninhada.</p>
</div>
</div>

    Este é um parágrafo dentro de uma div.

    Este é outro parágrafo dentro de uma div.

    Este é um span dentro de uma div.

    E este é um parágrafo dentro de uma div aninhada.

    Neste exemplo, todos os elementos <p> que são descendentes dos elementos <div> teriam os estilos aplicados pelo CSS.
    O elemento <span> não seria seleccionado por este selector CSS, pelo que não tem os estilos especificados aplicados.

    O Selector Descendente é uma forma de seleccionar elementos que estão aninhados dentro de outros elementos, permitindo seleccionar filhos específicos de um elemento, independentemente de quão abaixo na linha descendente eles estejam.

  8. Selectores Irmãos Adjacentes e Gerais

    O Selector Irmão Adjacente é o próximo selector na flista de selectores CSS.
    Este selector permite seleccionar um elemento que necessita de seguir diretamente outro elemento específico.
    Apenas o elemento que está imediatamente a seguir é tido em conta, todas as outras sequências de elementos são ignoradas.

    De notar que o elemento seleccionado por este selector será aquele "seguinte", e não aquele "dentro".
    Ao estilizar elementos que estão próximos uns dos outros, o Selector de Irmãos Adjacentes é muito eficiente.

    Um símbolo de mais (+) designa o Selector Irmão Adjacente.
    Exemplo de seletor adjacente:

    .contentor h1 + p {
  color: skyblue;
}   
       
    <div class="contentor">
<h1>Um título bem fixe!</h1>
<p>Parágrafo a estilizar com o selector irmão adjacente</p>
<p>Parágrafo somente para encher espaço e servir de exemplo de como não é abrangido pelo selector.</p>
</div>

    Um título bem fixe!

    Parágrafo a estilizar com o selector irmão adjacente

    Parágrafo somente para encher espaço e servir de exemplo de como não é abrangido pelo selector.

    No exemplo acimas, o código CSS acima irá seleccionar o primeiro elemento "p" que se segue imediatamente ao elemento "h1" dentro da div com o nome de contentor, e a cor do elemento seleccionado será azul-celeste.

    Uma variante simplificada do Selector Irmão Adjacente é geralmente considerada como o Selector Irmão Geral.
    Apesar de não estarem relativamente ligados entre si, pode também seleccionar todos os elementos que são irmãos do elemento especificado.

    Se pretendes empregar o combinador geral de irmãos, deves especificar o primeiro elemento antes de incorporar o sinal gráfico til (~) e o segundo elemento, que deve vir depois do primeiro.
    Exemplo do Selector Irmão Geral:

    .contentor h1 ~ p {
  color: lime;
}   
       
    <div class="contentor2">
<h1>Um título bem fixe!</h1>
<p>Parágrafo a estilizar com o selector irmão adjacente</p>
<p>Parágrafo somente para encher espaço e servir de exemplo de como é abrangido pelo selector.</p>
<p>Mais um parágrafo somente para encher espaço e servir de exemplo de como também é abrangido pelo selector.</p>
<p>E outro parágrafo somente para encher espaço e servir de exemplo de como ainda é abrangido pelo selector.</p>
</div>

    Um título bem fixe!

    Parágrafo a estilizar com o selector irmão adjacente

    Parágrafo somente para encher espaço e servir de exemplo de como é abrangido pelo selector.

    Mais um parágrafo somente para encher espaço e servir de exemplo de como também é abrangido pelo selector.

    E outro parágrafo somente para encher espaço e servir de exemplo de como ainda é abrangido pelo selector.

    Neste exemplo, o código CSS acima irá selecionar todos os elementos "p" que se seguem ao elemento "h1" dentro da div com o nome de contentor, e a cor dos elementos seleccionados será lima.
    É importante referir que estes selectores só funcionam com elementos que partilhem o mesmo elemento pai.

  9. Pseudo-classes

    O estado distinto de um elemento é especificado por uma pseudo-classe, precedida por dois pontos (:).
    Com base no estado de um elemento, um estilo pode ser-lhe aplicado, como por exemplo, quando um utilizador passa o rato sobre ele, visita ou clica numa ligação, etc...

    O termo pseudo-classe envolve simplesmente definir estilos com base na condição de elementos especificados.
    Estas pseudo-classes podem ser usadas para melhorar a experiência geral do utilizador devido à sua simplicidade e facilidade de utilização.

    Semelhante a "pairar", "visitado" ou qualquer outra circunstância iniciada pelo utilizador, e a menos que um elemento seja uma caixa de seleção ou um botão de opção, e esteja marcado, esta pseudo-classe apenas terá como alvo esse elemento.
    Aqui estão alguns exemplos de pseudo-classes normalmente utilizadas:

    :hover
    selecciona um elemento quando o utilizador passa o rato sobre ele.
    a:hover {
    color: lime;
    text-decoration: underline;
}

    Aqui, quando o utilizador passar o rato sobre o elemento "a", a cor do texto mudará para lima e será adicionado um sublinhado ao texto.

    :active
    selecciona um elemento quando este está a ser activado pelo utilizador, por exemplo, quando um botão está a ser clicado.
    button:active {
  background: yellow;
  color: black;
}

    Aqui, quando o botão for clicado, a cor de fundo do botão mudará para amarelo e o texto para preto.

    :focus
    selecciona um elemento quando este está em foco, como quando um utilizador clica num campo de entrada de um formulário.
    input:focus {
    border: 1px solid LightBlue;
}

    Aqui, quando o campo de entrada é seleccionado, será adicionada uma borda azul-claro de 1px ao elemento.

    :visited
    selecciona um elemento, geralmente uma ligação, que foi visitado pelo utilizador.
    a:visited {
    color: purple;
}

    Aqui, quando o utilizador visita a ligação, a cor do texto da mesma muda para roxo.

    Estes são apenas alguns exemplos das muitas pseudo-classes disponíveis no CSS.
    Podem ainda ser combinadas com outros selectores para criar estilos mais específicos para diferentes estados de um elemento.

  10. Pseudo-elementos

    Um pseudo-elemento permite aplicar estilo a uma parte ou pedaço específico de um elemento.
    Os pseudo-elementos são precedidos por um duplo dois pontos (::), ao contrário das pseudo-classes, que são precedidas somente por dois pontos (:).

    Em alguns navegadores mais recentes, mesmo a maioria dos pseudo-elementos já é aceite somente com dois pontos (:), tal como as pseudo-classes.

    Os Selectores de pseudo-elementos são utilizados para estilizar uma parte específica de um elemento, podem servir para inserir novo conteúdo ou alterar a aparência de uma secção específica do conteúdo.
    Por exemplo, podemos combinar com as classes CSS para modificar o tipo de letra da primeira linha de um parágrafo.

    Além disso, ainda podemos utilizar pseudo-elementos para inserir novo conteúdo antes ou depois do elemento escolhido.
    Podem ver um exemplo prático deste tipo de pseudo-elemento um pouco mais acima nas demontrações de alguns exemplos onde a palavra "Demonstração" foi inserida através deste método.

    Aqui estão alguns exemplos de pseudo-elementos normalmente utilizados:

    ::before
    serve para inserir conteúdo antes de um elemento.
    p::before {
    content: "Ler Mais: ";
}

    Aqui, o texto "Leia isto: " será introduzido antes de cada elemento "p".

    ::after
    serve para inserir conteúdo depois de um elemento.
    p::after {
    content: " (Fim do texto)";
}

    Aqui, o texto " (Fim do texto)" será introduzido após cada elemento "p".

    ::first-letter
    serve para estilizar a primeira letra de um elemento.
    p::first-letter {
    font-size: 32px;
    font-weight: bold;
    color: red;
}

    Aqui, a primeira letra de cada elemento "p" terá um tamanho da letra de 32px, negrito e cor vermelha.
    Podem também ver um exemplo prático deste método, com os meus estilos personalizados, na primeira letra do texto deste artigo ao cima da página. ;)

    ::first-line
    serve para estilizar a primeira linha de um elemento.
    p::first-line {
    font-style: italic;
}

    Aqui, a primeira linha de cada elemento "p" estará em itálico.

    É importante notar que alguns pseudo-elementos ainda não são suportados por algumas versões mais antigas de alguns navegadores, pelo que deves sempre verificar a compatibilidade do navegador antes de os utilizar.
    Podes utilizar estes pseudo-elementos em combinação com outros selectores para criar estilos mais específicos e criar efeitos CSS personalizados.

Como devem ter reparado, mantive a coisa o mais simples possivel.
Mas caso tenha alguma questão, podes deixar a tua(s) dúvida(s) nos comentários.

E por hoje é tudo. ;)

Até Breve. :-F

Aspirante a Artista Digital, Moderador no site Heromorph desde 2007. Um dos fundadores do Quadradinhos inK, projecto de BD com artistas de Portugal e Brasil.
Gosto de BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, um blogue sobre nada e mais alguma coisa.
BloggerTwitterFacebookPinterestStackOverflowNexusModsGOG.comSteamContactoPaypal

Comentários

Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.

Mas antes de comentarem, leiam as minhas Regras dos Comentários.

Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.

Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.

Enviar um comentário