Introdução

Olá galera, como prometido no post do menu toggle sem javascript, hoje irei falar sobre os seletores avançados do CSS. Pretendo fazer outro post somente com as pseudo-classes e pseudo-elementos.

A principio você pode me perguntar "por que eu vou querer saber sobre seletores avançados?*, mas acredite em mim, após você conhecê-los nunca mais irá querer parar de usá-los !

Sem mais delongas, mãos a obra !

Seletores CSS

Os seletores CSS são exatamente todas as keywords e métodos do CSS, inclusive '.' (ponto), '#' (hashtag) e a própria ',' (vírgula), sendo assim vou tentar "corrigir" um pouco o título, nós vamos falar somente dos seletores que não são nem pseudo-classes e nem pseudo-elementos.

Aqui segue uma listinha dos seletores que iremos abordar.

elemento1 ~ elemento2

O seletor til, irá selecionar todos os próximos elementos no mesmo nível hierarquico do elemento1("origem").

index.html 

<!-- código CSS do snippet abaixo -->
<style>
  ul li {
    padding: 10px 10px;
  }

  /* elemento que aplica til tem cor cinza claro*/
  ul li.til{
    background: #666;
    color: #fff;
  }

  /* ~ irá selecionar todos os elementos no mesmo nível
       hierarquico que tiverem a classe foo */
  ul li.til ~ .foo {
    background: #333;
    color: #fff;
  }
</style>
...
...
<!-- código html do snippet abaixo -->
<ul>
  <li class="til">elemento que aplica o til</li>
  <li>elemento não afetado</li>
  <li class="foo">elemento que sofre efeito do til</li>
  <li class="foo">elemento que sofre efeito do til</li>
  <li>elemento não afetado</li>
  <li>elemento não afetado</li>
  <li class="foo">elemento que sofre efeito do til</li>
  <ul>
    <li>elemento em outro nivel não afetado</li>
    <li class="foo">elemento em outro nivel com classe foo não alterado</li>
  </ul>
</ul>

See the Pen seletor til by Matheus Mesquita (@mathmesquita) on CodePen.

elemento1 > elemento2

O seletor >, irá selecionar somente os elementos filhos de primeiro grau do elemento1("origem").

index.html 

<!-- código CSS do snippet abaixo -->
<style>
  *{font-family: Verdana;}
  ul li {
    padding: 10px 10px;
  }

  /* > irá selecionar todos os elementos filhos de 
       primeiro grau que tenham a classe .foo */
  ul.maiorque > li.foo{
    background: #666;
    color: #fff;
  }
</style>
...
...
<!-- código html do snippet abaixo -->
<ul class="maiorque">
  <li class="foo">filho de primeiro grau</li>
  <li>filho de primeiro grau sem classe .foo</li>
  <li class="foo">filho de primeiro grau</li>
  <li>filho de primeiro grau sem classe .foo</li>
  <li class="foo">filho de primeiro grau</li>
  <ul>
    <li class="foo">filho de segundo grau</li>
    <li class="foo">filho de segundo grau</li>
    <ul>
      <li class="foo">filho de terceiro grau</li>
      <li class="foo">filho de terceiro grau</li>
    </ul>
  </ul>
</ul>

See the Pen seletor maior que by Matheus Mesquita (@mathmesquita) on CodePen.

elemento1 + elemento2

O seletor +, é parecido com o ~, a diferença é que ele selecionará somente o elemento2 que esteja IMEDIATAMENTE após o elemento1("origem") no mesmo nível hierarquico.

index.html 

<!-- código CSS do snippet abaixo -->
<style>
  *{font-family: Verdana;}
  ul li {
    padding: 10px 10px;
    margin: 5px 0;
  }

  ul li.mais{
    background: #666;
    color: #fff;
  }
  ul li.foo{
    background: #eee;
    color: #777;
  }
  /* + irá selecionar o elemento imediatamente após
       o elemento .mais e que tenha a classe .foo */
  ul li.mais + .foo {
    background: #333;
    color: #fff;
  }
</style>
...
...
<!-- código html do snippet abaixo -->
<ul>
  <li class="mais">elemento que aplica o mais</li>
  <li class="foo">elemento que sofre efeito do mais</li>
  <li class="foo">elemento não afetado, mesmo com classe foo</li>
  <li class="foo">elemento não afetado, mesmo com classe foo</li>
  <li>elemento sem classe foo</li>
  <li class="mais">elemento que aplica o mais</li>
  <li>elemento sem classe foo(imediatamente após)</li>
  <li class="foo">elemento não afetado, mesmo com classe foo</li>
  <ul>
    <li>elemento sem classe foo em outro nivel</li>
    <li class="foo">elemento não afetado, mesmo com classe foo</li>
  </ul>
</ul>

See the Pen seletor mais by Matheus Mesquita (@mathmesquita) on CodePen.

Seletores de atributos

Para ficar mais facil a visualização, eu primeiro separei todas variedades do seletor de atributos e por fim terá o exemplo de todos pelo codepen !

[atributo]

O seletor [atributo], irá selecionar todos os elementos que possuam aquele atributo, independente de ter conteúdo.

index.css 

img[alt]{
  /* estilo */
}

[atributo=valor]

O seletor [atributo=valor], irá selecionar todos os elementos que tenham aquele atributo exatamente igual ao valor passado.

index.css 

input[type="checkbox"]{
  /* estilo */
}

[atributo~=valor]

O seletor [atributo~=valor], irá selecionar todos os elementos que o atributo tenha a palavra passada como valor, tem que ser a palavra passada sozinha, não pega os caracteres, mas sim a palavra.

index.css 

a[title~="mathmesquita"]{
  /* estilo */
}

[atributo|=valor]

O seletor [atributo|=valor], irá selecionar todos os elementos que o valor do atributo comece com a palavra passada, separada da próxima palavra por hífen.

index.css 

a[href|="https//"]{
  /* estilo */
}

[atributo^=valor]

O seletor [atributo^=valor], irá funcionar da mesma forma que [atributo|=valor], selecionando todos os elementos que o atributo comece com o valor passado.

index.css 

[class^="gallery"]{
  /* estilo */
}

[atributo$=valor]

O seletor [atributo$=valor], irá selecionar todos os elementos que o atributo termine com o valor passado.

index.css 

a[href$=".pdf"]{
  /* estilo */
}

[atributo*=valor]

O seletor [atributo*=valor], irá funcionar da mesma forma que [atributo~=valor], selecionando todos os elementos que o atributo possua a string passada em valor

index.css 

img[alt*="montanhas"]{
  /* estilo */
}

Exemplos

index.html 

<!-- código CSS do snippet abaixo -->
<style>
  *{font-family: Verdana;}

  /* seleciona todas as imagems com atributo alt e bota borda azul */
  img[alt]{
    border: 4px solid blue;
  }

  /* seleciona todos os inputs com type checkbox e os aumenta*/
  input[type="checkbox"]{
    width: 100px;
    height: 100px;
  }

  /* seleciona todos os links que tenham a palavra mathmesquita no atributo title e deixa a cor da letra vermelha */
  a[title~='mathmesquita']{
    color: red;
  }

  /* seleciona todos os links que comecem com a palavra 'https', separada da próxima palavra por hífen, no atributo title e deixa com o fundo preto */
  a[title|="https"]{
    background: #000;
    color: #fff;
  }

  /* seleciona todos os elementos do DOM que possuem a classe começando com a string 'gallery' e adiciona uma borda verde*/
  [class^="gallery"]{
    border: 3px solid green;
  }

  /* seleciona todos os links que o atributo href termina com .pdf e deixa a cor vermelha com fundo preto */
  a[href$=".pdf"]{
    color: red;
    background: #000;
  }

  /* seleciona todas as imagems que possuem a palavra montanhas no seu atributo alt e deixa a cor da borda amarela*/
  img[alt*="montanhas"]{
    border-color: yellow;
  }
</style>
...
...
<!-- código html do snippet abaixo -->
<img src="https://image.freepik.com/icones-gratis/facebook_318-136394.jpg" alt="Logo do facebook" />

<br /><br />
<input type="checkbox" />

<br /><br />
<a href="http://mathmesquita.me/" title="link para o site do mathmesquita">link para meu blog com title contendo mathmesquita</a>

<br /><br />
<a href="https://mathmesquita.me/" title="https-é indicado para o meu blog">link para meu blog com title começando com https</a>

<br /><br />
<div class="galleryBig">
  div começando com classe gallery
</div>
<img class="galleryItem" src="http://www.mrpatel.net/IMAGES/JavaScript.png" />
<div>
  imagem com classe galleryItem e sem atributo alt
</div>

<br /><br />
<a href="http://www.yugioh-card.com/ygo_cms/ygo/all/uploads/Rulebook_v9_pt.pdf" target="_blank">link para um arquivo .pdf</a>

<br /><br />
<img src="https://image.freepik.com/icones-gratis/paisagem-das-montanhas-no-dia-ensolarado_318-74296.jpg" alt="icone com montanhas e um sol" />

See the Pen seletores [atributo [=valor]] by Matheus Mesquita (@mathmesquita) on CodePen.

Conclusão

Seletores avançados são muito úteis quando queremos fazer as coisas da maneira mais simples e rápida, sem pensar em muitas classes ou qualquer padrão de escrita de CSS como BEM, ITCSS etc.

Existem outros seletores que chamamos de pseudo-classes e pseudo-elementos que não foram abordados nesse post e que também são muito úteis para truques de CSS, desenhos e muito mais coisa, esperem o próximo post que irei falar de todos eles !

Espero que tenham gostado, e obrigado por quem leu até aqui, dúvidas, críticas e sugestões, os comentários estão sempre abertos! Por hoje é só isso e até a próxima galera. :D