3

Estou desenvolvendo um menu responsivo usando css3 (não posso usar JS), e estou com um problema que está me impedindo de avançar, o problema é o seguinte :

input:checked ~ nav {
  display: none;
}

Porém a propriedade não é aplicada ao nav quando o input é marcado.

Exemplo do código problema em um código :

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

input:checked ~ nav {
  display: none;
}
<body>
  <header>
    <div class="menu">
      <input type="checkbox" />
    </div>
    <nav>
      <ul>
        <li><a href="#">INICIO</a></li>
        <li><a href="#">SOBRE</a></li>
        <li><a href="#">CONTATOS</a></li>
        <li><a href="#">FALE CONOSCO</a></li>
        <li><a href="#">PROJETOS</a></li>
      </ul>
    </nav>
  </header>
  
</body>

1 Resposta 1

5

O problema é que o seletor ~ se refere a um elemento que é precedido por outro dentro do mesmo "pai" da estrutura em árvore do arquivo, e não é o caso do seu HTML.

Da documentação do W3C:

8.3.2. General sibling combinator

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

(grifo meu, na parte que nos interessa)

Que em resumo é isto:

O combinador de "irmão genérico" é o "til" (~), que separa duas sequências de seletores simples. Os elementos tem um pai em comum na árvore do documento, e o primeiro dos elementos precede o segundo, não necessariamente imediatamente.

No seu caso, o "pai" dos elementos é diferente, só o "avô" é o mesmo.

Tem muitas maneiras de se resolver, a melhor só depende do geral do seu código. O importante é entender como funcionam os seletores do CSS.


Exemplos de solução:

Uma solução seria por o nav dentro da div:

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

input:checked ~ nav {
  display: none;
}
<body>
  <header>
    <div class="menu">
      <input type="checkbox" />
      <nav>
        <ul>
          <li><a href="#">INICIO</a></li>
          <li><a href="#">SOBRE</a></li>
          <li><a href="#">CONTATOS</a></li>
          <li><a href="#">FALE CONOSCO</a></li>
          <li><a href="#">PROJETOS</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>

Outra seria tirar o input da div:

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

input:checked ~ nav {
  display: none;
}
<body>
  <header>
    <input type="checkbox" />
    <nav>
      <ul>
        <li><a href="#">INICIO</a></li>
        <li><a href="#">SOBRE</a></li>
        <li><a href="#">CONTATOS</a></li>
        <li><a href="#">FALE CONOSCO</a></li>
        <li><a href="#">PROJETOS</a></li>
      </ul>
    </nav>
  </header>
</body>


Mas se precisar mesmo de um elemento dentro da div:

Você pode usar um label como "controle remoto" do checkbox:

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

#toggle,
input:checked ~ nav {
  display: none;
}
<body>
  <header>
    <div class="menu">
      <label for="toggle">[clique aqui]</label>
    </div>
    <input id="toggle" type="checkbox" />
    <nav>
      <ul>
        <li><a href="#">INICIO</a></li>
        <li><a href="#">SOBRE</a></li>
        <li><a href="#">CONTATOS</a></li>
        <li><a href="#">FALE CONOSCO</a></li>
        <li><a href="#">PROJETOS</a></li>
      </ul>
    </nav>
  </header>
  
</body>

1
  • Muito obrigado! Uma bela explicação hahaha.
    – Furabio
    Commented 17/11/2016 às 23:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .