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.