Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Duvida Seletores

Referente ao curso Flexbox: posicione elementos na tela

por Wendel Adriano Bitencourt
| 12.7k xp | 3 posts

Olá, vou tentar ser mais claro possivel, não sei se alguem vai me entender.

Primeiro vou colocar os códigos.

                <fieldset>
                        <legend class="rodapePrincipal-contatoForm-legend" for="email-contato">Entre em contato conosco</legend>
                        <div class="rodapePrincipal-contatoForm-fieldset"> 
                            <input class="rodapePrincipal-contatoForm-emailInput" type="email" name="email-contato" id="email-contato">
                            <button class="rodapePrincipal-contatoForm-submit" type="submit">Enviar</button>
                        </div>
                </fieldset>
.rodapePrincipal-contatoForm label[for=email-contato] {
    font-weight: bold;
    font-size: 14px;
    color: #000;
    margin-bottom: 5px;
    display: block;
}

Pq o professor usou ".rodapePrincipal-contatoForm label[for=email-contato]" e não usou a class "rodapePrincipal-contatoForm-legend" do proprio legend?

E pq "label[for=email-contato]"? é uma legend, não um label, como deu certo? Não deveria ser "legend[for=email-contato]"?

1 resposta
solução!
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá Wendel, tudo bem?

Primeiramente, parabéns pelo empenho e dedicação! O arquivo style.css não foi o foco do curso, ele foi feito apenas usado como base para podermos construir o flexbox.css, então foi ótimo o seu interesse em analisar o código e a observação que foi feita.

  • Parte 1 - label ou legend?

Neste caso, há uma alteração no código base, o correto seria:

.rodapePrincipal-contatoForm legend[for=email-contato] {
    font-weight: bold;
    font-size: 14px;
    color: #000;
    margin-bottom: 5px;
    display: block;
}

ao invés de:

.rodapePrincipal-contatoForm label[for=email-contato] {
    font-weight: bold;
    font-size: 14px;
    color: #000;
    margin-bottom: 5px;
    display: block;
}

Pois esse código faz referência a tag <legend>, veja:

<legend class="rodapePrincipal-contatoForm-legend" for="email-contato">Entre em contato conosco</legend>

Utilizando a ferramenta do desenvolvedor no navegador, é possível visualizar que as estilizações só são aplicadas quando utilizamos a sintaxe legend. Dessa forma:

duas telas da ferramenta do desenvolvedor, a primeira é referente ao uso incorreto da tag label, na imagem há uma seta apontando para o "entre em contato conosco" onde não há nenhuma propriedade sendo aplicada. A segunda tela da ferramenta do desenvolvedor mostra as propriedades sendo aplicadas no "entre em contato conosco" devido o uso corredto da tag legend

  • Parte 2 - legend[for=email-contato] ou .rodapePrincipal-contatoForm-legend ?

Na programação temos formas diferentes de chegarmos ao mesmo resultado e esse é um caso, ou seja, independente das duas opções, ambas irão estilizar o <legend>, é só uma questão de preferência mesmo. Entretanto, é importante escolhermos apenas uma forma, para que não haja chances de uma propriedade sobrescrever a outra.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!