Add attribute via CSS if element below contains x element inside

Navigation
4

Hello! I do not know if I could be very clear with the title of my question. But my question is with the following code: 

<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>

I want to be using margin-bottom:10px; in .news-title only if the input[name="name_news"] element exists. I know that you have to use jQuery to solve this, but I want to know if you can do it using only CSS. I tried using the following parameter:

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

But it did not work, because it gives the margin in the input element. I hope someone can help me with this, thanks: D

    
asked by anonymous 06.09.2018 / 14:17

2 answers

2

I do not know exactly what problem you have to solve there, but I think your thinking about sorting the classes and property is a bit wrong ...

What would you put margin-bottom on the parent if you can just put margint-top on the child? Seeing the HTML structure that you set up would have no problem whatsoever. Since only if the field exists it will have margin , so what to put in the parent ... put right in the element itself:)

OBS: The construction of your title inside tag <i> was wrong ...

See the example: 

.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>
    
06.09.2018 / 15:21
3

Only by CSS , it is not yet possible to do this, in the new CSS nível 4 specification, this would be possible, since he imagines that if input[name="name_news"] exists, he could apply margin-top to parent element class="news-input" for this you would use has ... 

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

As this is not yet reality you can use javascript, example ... 

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>
    
06.09.2018 / 14:52
How to calculate currency appearing decimal places in JS? Wrap attribute of textarea tag