4

Olá! Não sei se consegui ser muito claro com o título da minha questão. Mas minha dúvida é com o seguinte código:

<div id="newsletter" class="col-sm-12">
  <div class="news-title">
    <i class="fa fa-envelope hidden-xs hidden-sm"></i>RECEBA OFERTAS E LANÇAMENTOS NO SEU E-MAIL!
  </div>
  <div class="news-input">
    <input type="hidden" name="source" value="ecommerce">
    <input type="text" name="name_news" placeholder="Digite seu nome" class="form-control input-lg">
    <input type="email" name="email_news" placeholder="Digite seu e-mail" class="form-control input-lg">
    <span class="input-group-btn">
			<button type="button" class="btn btn-lg btn-newsletter" id="newseltter_send" data-loading-text="ENVIANDO...">ENVIAR</button>
		</span>
  </div>
</div>

Quero estar usando margin-bottom:10px; em .news-title apenas se existir o elemento input[name="name_news"]. Sei que tem como usar jQuery pra resolver isso, mas quero saber se tem como fazer usando apenas CSS. Tentei utilizar o seguinte parâmetro:

#newsletter > .news-title ~ .news-input > input[name="name_news"]

Porém não deu certo, pois ele dá a margem no elemento input. Espero que alguém possa me ajudar com isso, obrigado :D

2 Respostas 2

3

Somente pelo CSS ainda não é possível fazer essa verificação, na nova especificação CSS nível 4, isso seria possível, pois imagina que se input[name="name_news"] existir, ele poderia aplicar um margin-top no elemento pai class="news-input", para isso você usaria o has...

div.news-input:has(> input[name="name_news"]) 
{ 
     margin-top: 10px;
}

Como isso ainda não é realidade você pode usar javascript, exemplo...

let input = document.querySelector('input[name="name_news"]');

if(input)
  input.parentNode.style.marginTop = '10px';
<div id="newsletter" class="col-sm-12">
  <div class="news-title">
    <i class="fa fa-envelope hidden-xs hidden-sm" />RECEBA OFERTAS E LANÇAMENTOS NO SEU E-MAIL!
  </div>
  <div class="news-input">
    <input type="hidden" name="source" value="ecommerce">
    <input type="text" name="name_news" placeholder="Digite seu nome" class="form-control input-lg">
    <input type="email" name="email_news" placeholder="Digite seu e-mail" class="form-control input-lg">
    <span class="input-group-btn">
			<button type="button" class="btn btn-lg btn-newsletter" id="newseltter_send" data-loading-text="ENVIANDO...">ENVIAR</button>
		</span>
  </div>
</div>

2
  • :has() é um seletor experimental sem quase ou nenhum suporte para a maioria (se não todos) navegadores populares. 6/09/2018 às 13:42
  • A intenção era realmente usar somente CSS nesse caso. Mas se não tiver como, terei que usar javascript pelo visto :/ 6/09/2018 às 14:16
2

Cara não sei exatamente o problema que vc tem para resolver ai, mas acho que o seu pensamento sobre a ordenação das classes e propriedade está meio equivocado...

Para que vc colocaria margin-bottom no pai se vc pode simplesmente colocar margint-top no filho?Vendo a estrutura de HTML que vc montou não teria problema algum nisso. Visto que só se o campo existir ele terá margin, então pra que colocar no pai... coloca direto no próprio elemento :)

OBS: A construção do seu título dentro ta tag <i> estava errado...

Veja o exemplo:

.news-input > input[name="name_news"] {
  margin-top: 20px;
}
/* sote terão margin se input[name="name_news"] existir se não fica existir fica o valor padrão */
input[name="name_news"] + input[name="email_news"], 
input[name="name_news"] + input[name="email_news"] + span > button {
  margin-top: 20px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div id="newsletter" class="col-sm-12">
    <div class="news-title">
        <i class="fa fa-envelope hidden-xs hidden-sm"></i>
        RECEBA OFERTAS E LANÇAMENTOS NO SEU E-MAIL!
    </div>
    <div class="news-input">
        <input type="hidden" name="source" value="ecommerce">
        <input type="text" name="name_news" placeholder="Digite seu nome" class="form-control input-lg">
        <input type="email" name="email_news" placeholder="Digite seu e-mail" class="form-control input-lg">
        <span class="input-group-btn">
            <button type="button" class="btn btn-lg btn-newsletter" id="newseltter_send" data-loading-text="ENVIANDO...">ENVIAR</button>
        </span>
    </div>
</div>

3
  • Se eu colocar margin-top no filho o outro input e button ficam desalinhados, pelo fato de estarem todos na mesma linha. Dê uma olhada: prntscr.com/krc18c 6/09/2018 às 14:07
  • 1
    Em relação à tag <i> está certo, por algum motivo aqui no editor ficou assim. Mas obrigado mesmo assim pela observação! 6/09/2018 às 14:09
  • 1
    @LeonardoDias de princípio não consegui entender o que vc queria, mas com a imagem ficou mais claro. Olha ai que eu editei o código, a margem só vai existir se o elemento input[name="name_news"] existir, testa ai com o CSS que editei, deisei o comentário no código
    – hugocsl
    6/09/2018 às 14:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .