Solucionado
Na aula, aprendemos uma espécie de "CSS condicional" Onde um elemento 1 é usado com uma pseudo-classe e um elemento 2 é estilizado:
.container__botao:checked ~ .lista-menu {
display: block;
}
Porém é dito que com o modelo do "~", essa estilização só funciona se o elemento 2 (no caso .lista-menu), estiver posicioando depois do elemento 1 no HTML.
E se eu quisesse estilizar o elemento 2 como sendo um elemento posicionado antes? Como eu faria?
Olá, Mauricio! Tudo bem?
Realmente, o combinador ~ (til) só funciona para selecionar elementos que vêm depois no DOM. Uma das abordagens possíveis para não depender da ordem seria usar JavaScript para adicionar uma classe ao elemento desejado quando o checkbox for marcado. Deixo abaixo um exemplo de como você pode fazer isso:
Criei um arquivo script.js e, no HTML, adicionei o link de script após o fechamento do body:
<!DOCTYPE html>
<html>
<head>
<!-- código omitido -->
</head>
<body>
<!-- código omitido -->
</body>
<script src="script.js"></script>
</html>
No CSS (header.css), apaguei o estilo de .lista-menu e substituí pelo código abaixo:
.lista-menu {
display: none;
}
.lista-menu.active {
display: block;
}
No arquivo script.js recém criado, escrevi o código abaixo, que monitora se a checkbox foi clicada ou não e, se sim, ela recebe a classe active:
document.addEventListener('DOMContentLoaded', function() {
const checkbox = document.getElementById('menu');
const menu = document.querySelector('.lista-menu');
checkbox.addEventListener('change', function() {
if (checkbox.checked) {
menu.classList.add('active');
} else {
menu.classList.remove('active');
}
});
});
Neste exemplo, estamos usando JavaScript para adicionar ou remover a classe active ao elemento .lista-menu com base no estado do checkbox. Isso permite que você estilize o elemento .lista-menu independentemente de sua posição no HTML.
Espero ter ajudado. Em caso de dúvidas, conte com o fórum!
Um abraço e bons estudos!