Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Dúvida sobre o trecho do input

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Formulários e atividade Melhorando a usabilidade com truques CSS

por Márcia Sousa Lages
| 127.5k xp | 63 posts

Gostaria de saber porque está usando o "~" no trecho abaixo

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

input[value="Outro"]:checked  ~ input {
    display: inline;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>João da Silva - Biografia</title>
    <link rel="icon" href="imagens/favicon.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/site.css">
    <link rel="stylesheet" href="css/bio.css">
    <link rel="stylesheet" href="css/form.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
    <main>
        <h1 class="titulo-principal">Contato</h1>
        <div class="container">
            <form>
            <fieldset>
                <legend>Dados pessoais</legend>
                <label for="nome">Nome:</label>
                <input id="nome" name="nome" placeholder="Seu nome aqui" pattern="[A-Za-z ']{4,}" title="Preencha somente com letras" autofocus required>
                <label for="email">Email:</label>
                <input id="email" name="e-mail" placeholder="seu@email.com" type="email" required>
            </fieldset>

            <fieldset>
                <legend>Assunto:</legend>
                <label>
                    <input type="radio" name="assunto" value="servico">
                    Serviço
                </label>

                <label>
                    <input type="radio" name="assunto" value="blog">
                    Blog
                </label>

                <fieldset>
                    <input type="radio" value="Outro">
                    <label>Outro</label>
                    <input type="text">
                </fieldset>
             </fieldset>

                <label for="msg">Mensagem:</label>
                   <textarea id="msg" name="mensagem" cols="30" rows="6" placeholder="Digite aqui sua mensagem"></textarea>

                <button type="submit">Enviar <strong>para mim</strong></button>
            </form>
        </div>
    </main>
    <img src="imagens/eu.jpg" alt="Minha foto" class="minha-foto">
    <aside class="navegacao-site">
        <h1>João da Silva</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="bio.html">Sobre mim</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>
        <ul class="icones-redes-sociais">
            <li>
                <a href="https://github.com/joaodasilva" class="github" data-legenda="Clique em mim">
                    Github
                </a>
            </li>
            <li>
                <a href="https://twitter.com/joaodasilva" class="twitter" data-legenda="Clique aqui para acessar o Twitter">
                    Twitter
                </a>
            </li>
            <li>
                <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin" data-legenda="Clique aqui para acessar o Linkedin">
                    LinkedIn
                </a>
            </li>
        </ul>
    </aside>
    <footer class="rodape-pagina">
        &copy; João da Silva 2014
    </footer>
</body>
</html>
6 respostas
por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Marcia, tudo certo?

O símbolo de til ("~") é usado para selecionar elementos irmãos, siblings.

Além dos cursos aqui na Alura, na apostila de HTML da Caelum mostra esse e mais alguns.

Espero ter ajudado,

Abcs!

por Márcia Sousa Lages
| 127.5k xp | 63 posts

Pois é, eu entendo o símbolo, o que não entendi foi o porquê de usá-lo. Não poderia usar somente o input [value="Outro"]:checked

por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Marcia,

No caso do seletor input[value="Outro"]:checked ~ input o instrutor quis pegar o input que vem depois de um input checkado.

Isso para deixá-lo inline, diferente do input:checked em si que precisa ficar escondido.

Espero ter ajudado,

Abcs!

por Márcia Sousa Lages
| 127.5k xp | 63 posts

OI, Natan,

Desculpa mais ainda não entendi. No caso da declaração abaixo, ele não está mandado os seletores irmãos ficarem escondidos, quando na verdade ele quer que somente o input "Outro" esteja escondido.

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

E neste caso aqui, ele quer que o input "Outro", que esteja checked, apareça. Porquê então ele coloca os irmãos?

input[value="Outro"]:checked  ~ input {
    display: inline;
}
solução!
por Natan Souza
| 2115.9k xp | 3725 posts
Instrutor Product Design Lead

Oi Marcia,

Quando a gente pegar pra ler ou fazer um seletor, é mais interessante ler da direita pra esquerda. No código abaixo: 

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

Você está pegando um input, que vem depois de um input com o valor "Outro". Aí você está escondendo ele por conta do display: none.

Agora o outro codigo: 

input[value="Outro"]:checked  ~ input {
    display: inline;
}

Você está pegando um input, que vem depois de um input com valor "Outro" que está checado. Nesse caso ele está dando o display: inline justamente para que ele apareça.

Em seletores CSS, o elemento que está sendo alterado é sempre o da extrema direita, o mais próximo da abertura de chave ali.

Abcs!

por Márcia Sousa Lages
| 127.5k xp | 63 posts

Entendi, obrigada Natan.