Почему не срабатывает :checked?

Question

[Сергей Громов]

Не срабатывает псевдокласс :checked и не могу понять в чем дело.
Когда checkbox нажат, мой<label> должен принять значение атрибута data-close="Закрыть" но что-бы я не делал, этого не происходит

<input type="checkbox" id="clik">
   <nav class="col-xs-12">
    <label for="clik" data-open="Меню" data-close="Закрыть"></label>
  </nav>

Вот и CSS

nav label:after{
  content: attr(data-open);
}
    
#clik:checked nav label:after{
  content: attr(data-close);
}
label{
  cursor: pointer;
}

Ну и сам пример выложен на JSbin jsbin.com/jitusip/edit?html,css,output

Answer 1

[Дмитрий]

jsfiddle.net/soledar10/3g7d5ne5
или
jsfiddle.net/soledar10/1jw88vga

Answer 2

[romy4]

Потому что у вас селектор неправильный. nav не находится внутри input, он его sibling. используйте #clik ~ nav

Comments

[Сергей Громов]

Блин, точно :)))