Porque para alterar a cor de fundo e a cor da fonte quando clica em "categorias", nós precisamos acessar a classe através do "label" e não só criar uma classe diretamente para o "categorias" dentro do elemento "li" dele? Eu tentei dessa forma achando que iria simplificar o código mas não funcionou...
Oii, André!
A razão pela qual você precisa acessar a classe através do "label" e não diretamente no "li" é por conta da forma como os combinadores CSS e pseudo-classes funcionam.
No seu caso, estamos lidando com a interação do usuário, especificamente com a pseudo-classe :checked que é aplicada a um input do tipo checkbox ou radio. Quando você clica no "categorias", o que realmente está acontecendo é que um input associado a esse label está sendo marcado como checked.
O seletor .container__botao:checked~.container__rotulo está utilizando o combinador ~, que seleciona elementos que são irmãos de um elemento marcado como checked. Ou seja, ele está procurando por um label que é irmão de um input marcado como checked. Isso é necessário porque a interação de clique está acontecendo no input, e não diretamente no li.
Se você tentasse aplicar a classe diretamente ao li, não conseguiria capturar essa interação de forma eficaz, pois o li não está diretamente associado ao estado checked do input. É por isso que usamos o label e combinadores para estilizar o elemento corretamente quando o estado do input muda.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!