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:
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:
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:
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:
<th>
Descrição
</th>
<td>
Seleciona o elemento INPUT com o atributo TYPE cujo valor seja exatamente o valor TEXT
</td>
<td>
Seleciona o elemento <strong>a</strong> que contenha o atributo <strong>type</strong>não importando o valor.
</td>
<td>
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.
</td>
<td>
Seleciona elementos com o atributos que comecem com… Você pode querer selecionar apenas os links que apontem para um site específico, por exemplo.
</td>
<td>
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.
</td>
<td>
Seleciona o elemento <strong>a</strong> cujo o valor do atributo <strong>hreflang</strong> comece com PT. Ou seja valores como “pt-br” serão encontrados.
</td>
<td>
Seleciona o elemento <strong>a</strong> cujo o valor do atributo <strong>href</strong> seja exatamente <b>https://tableless.com.br/</b>.
</td>
<td>
Seleciona os elementos <strong>a</strong> cujo o valor tenha pelo menos uma ocorrência com a palavra “artigo”.
</td>
<td>
Um radio button ou um checkbox que esteja marcado
</td>
Há uma lista inteira de seletores aqui.