Seletores complexos em CSS3

A sintaxe do CSS é simples:

seletor {
propriedade: valor;
}


A propriedade é a característica que você deseja modificar no elemento. O valor é o valor referente a esta característica. Se você quer modificar a cor do texto, o valor é um Hexadecimal, RGBA ou até mesmo o nome da cor por extenso. Até aqui, nada diferente. Muitas vezes você não precisa aprender do que se trata a propriedade, basta saber que existe e se qiser decorar, decore. Propriedades são criadas todos os dias e não é um ato de heroísmovocê saber todas as propriedades do CSS e seus respectivos valores.

Os seletores são a alma do CSS e você precisa dominá-los. É com os seletores que você irá escolher um determinado elemento dentro de todos os outros elementos do site para formatá-lo. Boa parte da inteligência do CSS está em saber utilizar os seletores de uma maneira eficaz, escalável e inteligente.

O que é um seletor?

O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar quais elementos de um grupo de elementos serão formatados.

Seletores encadeados e seletores agrupados são a base do CSS. Você os aprende por osmose durante o dia-a-dia. Para você lembrar o que são seletores encadeados e agrupados segue um exemplo abaixo:

Exemplo de seletor encadeado:

div p strong a {
color: red;
}

Este seletor formata o link (a), que está dentro de um strong, que está dentro de P e que por sua vez está dentro de um DIV.

Exemplo de seletor agrupado:

strong, em, span {
color: red;
}

Você agrupa elementos separados por vírgula para que herdem a mesma formatação.

Estes seletores são para cobrir suas necessidades básicas de formatação de elementos. Eles fazem o simples. O que vai fazer você trabalhar menos, escrever menos código CSS e também menos código Javascript são os seletores complexos.

Os seletores complexos selecionam elementos que talvez você precisaria fazer algum script em Javascript para poder marcá-lo com uma CLASS ou um ID para então você formatá-lo. Com os seletores complexos você  consegue formatar elementos que antes eram inalcançáveis.

Exemplo de funcionamento

Imagine que você tenha um título (h1) seguido de um parágrafo (p). Você precisa selecionar todos os parágrafos que vem depois de um título h1. Com os seletores complexos você fará assim:

h1 + p {
color: red;
}

Esses seletores é um dos mais simples e mais úteis que é utilizado é por aí. Não precisa adicionar uma classe com JQuery, não precisa manipular o CMS para marcar o parágrafo, não precisa de nada. Apenas aplicar o seletor.

Abaixo, veja uma lista de seletores complexos e quaisas suas funções. Não colocarei todas as possibilidades aqui porque podem haver modificações, novos formatos ou outros formatos que podem se descontinuados. Para ter uma lista sempre atualizada, siga o link no final da tabela.

PADRÃO SIGNIFICADO CSS
elemento[atr] Elemento com um atributo específico. 2
elemento[atr=”x”] Elemento que tenha um atributo com um valor específico igual a “x”. 2
elemento[atr~=”x”] Elemento com um atributo cujo valor é uma lista separada por espaços, sendo que um dos valores é “x”. 2
elemento[atr^=”x”] Elemento com um atributo cujo valor termina exatamente com string “x”. 3
elemento[atr$=”x”] Elemento com um atributo cujo valor termina exatamente com string “x”. 3
elemento[atr*=”x”] Elemento com um atributo cujo valor contenha a string “x”. 3
elemento[atr|=”en”] Um elemento que tem o atributo específico com o valor que é separado por hífen começando com EN (da esquerda para direita). 2
elemento:root Elemento root do documento. Normalmente o HTML. 3
elemento:nth-child(n) Selecione um objeto N de um determinado elemento. 3
elemento:nth-last-child(n) Seleciona um objeto N começando pelo último objeto do elemento. 3
elemento:empty Seleciona um elemento vazio, sem filho. Incluindo elementos de texto. 3
elemento:enabledelemento:disabled Seleciona um elemento de interface que esteja habilitado ou desabilitado, como selects, checkbox, radio button etc. 3
elemento:checked Seleciona elementos que estão checados, como radio buttons e checkboxes. 3
E>F Seleciona os elementos E que são filhos diretos de F. 2
E+F Seleciona um elemento F que precede imediatamente o elemento E. 2

Lista atualizada pelo W3C: http://www.w3.org/TR/cc3-selectors/#selectors

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s