Home » Programação » Faça sua busca Enviar Seletores Complexos do CSS

Faça sua busca Enviar Seletores Complexos do CSS

By: 21/jan/2018 - 22:46 124 0 Comentários

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 checkboxradiosubmit, 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 type nã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://tekinfor.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://tekinfor.com.br/”] Seleciona o elemento a cujo o valor do atributo href seja exatamente http://tekinfor.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.

Via tableless

Tag(s):

Sobre Autor

Sou um Profissional em T.I , analista em Software e Hardware. Também um grande de fã de software livre, redes, programação, dispositivos móveis e tudo mais que envolve tecnologia.

Gostou desse artigo?

Inscreva seu e-mail no Tekinfor para receber atualizações diárias com as últimas notícias do mundo da tecnologia.

Comentários

CURTA O TEKINFOR NO FACEBOOK!