Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Não estou conseguindo entender por que o :checked não esta funcionando neste caso

HTML

<html>
<body>
    <section>
        <fieldset>
            <legend>Aplicando (align-items)</legend>
            <label><input type="radio" name="align-items" value="baseline"> Baseline</label>
            <label><input type="radio" name="align-items" value="center"  checked> Center</label>
            <label><input type="radio" name="align-items" value="flex-end"> Flex-end</label>
            <label><input type="radio" name="align-items" value="flex-start"> Flex-start</label>
            <label><input type="radio" name="align-items" value="inherit"> Inherit</label>
            <label><input type="radio" name="align-items" value="stretch"> Stretch</label>
            <label><input type="radio" name="align-items" value="unset"> Unset</label>
        </fieldset>

        <fieldset>
            <legend>Aplicando (justify-content)</legend>
            <label><input type="radio" name="justify-content" value="center"> Center</label>
            <label><input type="radio" name="justify-content" value="flex-end"> Flex-end</label>
            <label><input type="radio" name="justify-content" value="flex-start"> Flex-start</label>
            <label><input type="radio" name="justify-content" value="flex-start"> Inherit</label>
            <label><input type="radio" name="justify-content" value="initial" > Initial</label>
            <label><input type="radio" name="justify-content" value="space-around"> Space-around</label>
            <label><input type="radio" name="justify-content" value="space-between" checked> Space-between</label>
        </fieldset>

    </section>

    <section>
        <div>
            <h1>Evento Capuava</h1>
            <p>Venha conhecer a estrutura do autódromo de Capuava, onde você encontrará diversas curvas desafiadoras, que fará você melhorar muito sua técnica.</p>
            <button>Saber mais</button>
        </div>
        <div>
            <h1>Evento ECPA</h1>
            <p>Nosso autódromo é bem técnico onde você poderá aplicar todo o seu conhecimento, assim melhorar muito mais sua técnica.</p>
            <button>Saber mais</button>
        </div>
        <div>
            <h1>Evento Tuiuti</h1>
            <p>Nosso autódromo dispõe de uma infra muito boa onde você pode trazer seus familiares tornando seu treino um evento de família.</p>
            <button>Saber mais</button>
        </div>
        <div>
            <h1>Evento Interlagos</h1>
            <p>Nosso autódromo exigirá muito de você, venha correr no templo da velocidade.</p>
            <button>Saber mais</button>
        </div>
    </section>

</body>

</html>

CSS

body {
            width: 100%;
        }

        fieldset {
            border: .1em solid black;
            margin: 1em;
            padding: 1em;
        }

        section:nth-child(2) {
            border: .1em solid red;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        div {
            border: .1em solid black;
            margin: 1em;
            text-align: center;
            width: 200px;
            padding: 1em;
        }

        h1 {
            text-transform: uppercase;
            font-weight: bold;
            margin: 1em;
            font-size: 120%;
        }

        p {
            margin: 1em;
            font-size: 110%;
        }

        button {
            width: 70%;
            font-size: 120%;
        }

        input[value="baseline"]:checked section:nth-child(2) {
            align-items: baseline;
        }

        input[value="center"]:checked section:nth-child(2) {
            align-items: center;
        }

        input[value="flex-end"]:checked section:nth-child(2) {
            align-items: flex-end;
        }

        input[value="flex-start"]:checked section:nth-child(2) {
            align-items: flex-start;
        }

        input[value="inherit"]:checked section:nth-child(2) {
            align-items: inherit;
        }

        input[value="stretch"]:checked section:nth-child(2) {
            align-items: stretch;
        }

        input[value="unset"]:checked section:nth-child(2) {
            align-items: unset;
        }
1 resposta
solução!

É porque você ta selecionando um elemento :checked e tentando mudar o CSS de outro elemento na outra section. Só que não existe relação entre esses elementos. O CSS nao tem seletor pra voltar na hierarquia de elementos, não dá pra selecionar elemento pai/avô.

No CSS essencialmente temos como selecionar apenas elementos filhos (com espaço) ou elementos irmãos adjacentes (seletores > e +)

Como você quer usar o :checked como seletor base (se elemento X estiver selecionado, faça Y), e ele só vale em input que não pode ter filho, isso significa que na prática só conseguimos usar seletores de irmãos.

Então qualquer comportamento que você quiser implementar com :checked para selecionar outros elementos, precisa ser em elementos irmãos do input (e irmãos adjacentes, ou seja, que vêm depois do input).