Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Não entendi como usar o checked

Essa aula ficou bem confusa, não consegui entender o conseito do exercicio, como eu faço para esconder a caixa de testo e deixar ela visivel somente quando a opção outro for selecionada. Se tivesse uma video aula explicando na pratica tudo isso seria muito bom para uma melhor compreenção.

Alguem consegue me explicar por favor?

3 respostas
solução!

Talvez sua dúvida seja sobre a matéria de pseudoclasses.

De acordo com o que o professor disse, quando um <input> do tipo ratio (<input type="ratio">) é selecionado, o navegador coloca a pseudoclasse :checked nele.

Há também um outro detalhe importante que você pode estar tendo dúvida. E isso se refere a alguns seletores mais avançados do CSS como o til (~) e os colchetes ( tag[attribute=value] ).

Nesse exercício, dois códigos são apresentados na opinião do instrutor, vou analisar o primeiro:

input[value="outro"] ~ input
{
    display: none;
}

Observe que input[value="outro"] seleciona todos os inputs que têm o atributo "value" com o valor "outro". Obviamente, só existe um input no código HTML desse jeito. Depois disso, ou seja, de selecionar esse input, o til (~) seleciona todos os irmãos, após esse input, que são do tipo input.

Código HTML:

<fieldset>
    <input id="outro" type="radio" name="assunto" value="outro">
    <label for="outro">Outro</label>

    <input name="outro-assunto" type="text" placeholder="Informe o assunto específico">
</fieldset>

O único irmão do primeiro input que é do tipo input é o com atributo name="outro-assunto". Finalmente, selecionando ele, aplicamos o estilo display: none; que basicamente diz que esse input irmão não deverá ser renderizado.

A análise do segundo código é muito parecida:

input[value="outro"]:checked ~ input /* Após inputs com atributo value="outro" e que estão checados, seleciona os irmãos do tipo input */
{
    display: inline; /* renderiza esses irmãos como elementos em linha */
}

Qualquer dúvida avise-me por favor.

Muito obrigado Axxel, agora deu uma clareada, mas se fosse feito uma video aula com exemplo pratico seria muito bom né?

Muito obrigado!

Na verdade, a vídeo aula de seletores avançados mostra exemplos práticos do uso de todos esses seletores. Talvez, para você, não tenha sido suficiente ou não ficou claro. Nesse caso, poderia-se fazer uma vídeo aula com mais exemplos ou então, por enquanto, você pode colocar suas dúvidas aqui no fórum.

Mas, depois da vídeo aula, ainda se tem vários exercícios para treinar e entender esses seletores. Eu, particularmente, não saio de um exercício sem entender sua resposta.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software