Layouts condicionais rápidos e sujos com o seletor adjacente

Usei o seletor adjacente principalmente como uma ferramenta para atingir elementos que eu não queria atingir com uma classe, por exemplo, links após extensões ou parágrafos. Mas tive uma compreensão empolgante de usá-lo mais como uma condição para composições de página.

Considere um layout típico.

<style>

  /*Your basic container with whatever width constraints you want*/
  .container{
    width: 100%;
  }

  /*Sidebar with a defined width*/
  #sidebar{
    float: left;
    width: 300px;
  }

  /*Flexible content box*/ 
  #content{
    margin-left: 300px;
    width: auto;
  }
</style>

<div class="container">
  <div id="sidebar"></div>
  <div id="content"></div>
</div> 

O que isso significa?

Portanto, temos nosso layout padrão com uma barra lateral esquerda (para um aplicativo, digamos). Você poderia estar questionando a flutuação e a margem esquerda e tudo isso, mas espere.

Agora, este aplicativo tem uma tonelada de visualizações e o #content container é um ID bastante genérico, mas semântico, que eu gostaria de realizar mesmo quando o #sidebar não está no DOM. Eu quero isso por alguns motivos. Gerenciamento de estilo mais fácil e menos hiperespecífico no nível do contêiner, e não quero adicionar classes condicionais no #content por visualização. Eu odiaria bagunçar o DOM com classes de apresentação e a alternativa de injetar estilos de espaçamento de barra lateral por # classe semântica de conteúdo é ainda mais uma dor de cabeça.

Use o seletor adjacente, é super eficaz!

Se você não conhece o seletor adjacente, ele se parece com isto:

x + y { } 

O que isso faz é encontrar “x” no DOM e pegar o “y” imediatamente após o fazer. Você também pode usar o menos estrito “~” no lugar do “+” para selecionar qualquer “y” precedendo o “x” se você precisa pegar mais do que apenas um.

Obtendo a essência? Vamos enlouquecer e fazer … isso!

.container{
  width: 100%;
}

#sidebar{
  float: left;
  width: 300px;
}

#content{
  width: auto;
} 

#sidebar + #container{
  margin-left: 300px;
}

Agora, somente se você tiver a #sidebar na visualização, o #content terá a margem condicional de 300px, permitindo que os dois se alinhem perfeitamente. E quando #sidebar não está lá, você obtém seu conteúdo de largura total agradável sem nenhum esforço extra.

Leituras adicionais sobre seletores.

Lista prática de seletores de css do tutsplus .