Add attribute via CSS if the following element contains x element inside

Asked

Viewed 278 times

4

Hello! I don’t 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 there is an element input[name="name_news"]. I know you can use jQuery to solve this, but I want to know if you can do it using CSS only. 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 that, thank you :D

html css

2 answers

3

Only by CSS it is not yet possible to make this check, in the new specification CSS nível 4, this would be possible, because imagine that if input[name="name_news"] exist, he could apply a margin-top in the parent element class="news-input", for that you would use the 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>

  • :has() is an experimental selector with almost or no support for most (if not all) popular browsers.

  • The intention was to actually use only CSS in this case. But if I can’t, I’ll have to use javascript by the way :/

2


Dude I don’t know exactly what problem you have to solve there, but I think your thinking about class ordering and property is a little misguided...

What would you put it for margin-bottom in the father if you can just put margint-top in the son? Seeing the HTML structure you assembled would have no problem in it. Since only if the field exists it will have margin, then why put in the father... puts right in the element itself :)

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

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

  • If I put margin-top in the son the other input and button are misaligned because they are all on the same line. Take a look: http://prntscr.com/krc18c

  • 1

    In relation to the tag <i> That’s right, for some reason here in the editor it looked like this. But thanks anyway for the remark!

  • 1

    @Leonardodias at first could not understand what you wanted, but with the image became clearer. Look there I edited the code, the margin will only exist if the element input[name="name_news"] exist, test there with the CSS I edited, I know the comment in the code

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.