Seletores Complexos do CSS
Os seletores complexos mostram como a CSS pode ser dinâmica e direta.
Os seletores complexos foram feitos para suprir necessidades muito específicas do layout. Por exemplo: Imagine uma página de cadastro, essa página há um formulário enorme, com campos de todos os tipos: radio, checkbox, text, submit etc... Um HTML de exemplo:<form action=""> <fieldset> <label>Nome: <input type="text" class="input-text" /></label> <label><input type="checkbox" class="input-checkbox" /> Desejo receber newsletters</label> </fieldset> </form>Agora imagine que você tenha a necessidade de definir a largura somente dos campos de texto, você não poderá colocar a linha como a de baixo:
input { width: 200px; }Se você utilizar a linha acima, você selecionará todos os input, inclusive os de tipo checkbox, radio, submit, etc... Você gostaria apenas que os inputs de texto, ficassem com o estilo indicado. A saída mais "inteligente" até hoje é usando Javascript para encontrar esses elementos, para então atribuirmos uma classe para eles e depois formatarmos essa classe via CSS. Não é uma boa maneira. É aqui que entram os seletores complexos. Veja um exemplo abaixo de como resolveríamos o problema acima via CSS:
input[type="text"] { width: 200px; }Este seletor significa que você encontrará os inputs que contenham o atributo type cujo valor seja exatamente text. Aqui vão alguns outros exemplos de como os seletores podem ser úteis no dia a dia:
| Seletor | Descrição |
|---|---|
| input[type="text"] | Seleciona o elemento INPUT com o atributo TYPE cujo valor seja exatamente o valor TEXT |
| a[title] | Seleciona o elemento a que contenha o atributo typenão importando o valor. |
| a[href$=html] | Seleciona elementos com atributos cujo seu valor temine com... Por exemplo, você poderia querer selecionar todos os links que apotam para um arquivo .pdf, ou .php etc. |
| a[href^="http://tableless.com.br/"] | Seleciona elementos com o atributos que comecem com... Você pode querer selecionar apenas os links que apontem para um site específico, por exemplo. |
| a[title~="tableless"] | Seleciona os elementos cujo o atributo tenha um valor que seja separado por espaços. No exemplo acima ele seleciona um link que contenha o atributo title e que em seu valor tenha a palavra "tableless" no meio. |
| a[hreflang|="pt"] | Seleciona o elemento a cujo o valor do atributo hreflang comece com PT. Ou seja valores como "pt-br" serão encontrados. |
| a[href="http://tableless.com.br/"] | Seleciona o elemento a cujo o valor do atributo href seja exatamente http://tableless.com.br/. |
| a[title*="artigo"] | Seleciona os elementos a cujo o valor tenha pelo menos uma ocorrência com a palavra "artigo". |
| input:checked | Um radio button ou um checkbox que esteja marcado |
Há uma lista inteira de seletores aqui.
Pingback: JQuery para produção de Layouts | Boas práticas de Desenvolvimento com Padrões Web
Pingback: Propriedades de CSS do IE7 ou superior | Tableless
Pingback: Tabela Zebrada | Tableless