style to specific div class elements containing a specific input elements

Question

I have a below set of input text elements in my page. I actually need to apply style to div element of "forms_in_ap" class containing the #email, #reEmail, #nogInFirstName, #nogInAccNumber elements alone, in Safari browser of all MAC and IOS devices.

CSS to apply style to specific elements of Specific Div:

html[xmlns*=""]:root
.form_input_wrap input#email,
.form_input_wrap input#reEmail,
.form_input_wrap input#nogInFirstName,
.form_input_wrap input#nogInAccNumber
{
  height: 42px;
}

HTML Code:

<div class="asd removeFocus">
  <div class="forms_in_ap removeFocus">
    <label for="email">Email address</label>
    <div class="removeFocus">
      <input type="text" id="email" name="email" class="required error ">
      <span id="email-error" class="error">Please enter a Valid Email Address.</span>
    </div>
  </div>
  <div class="forms_in_ap removeFocus">
    <label for="reEmail">Re-enter email address</label>
    <div class="removeFocus">
      <input type="text" id="reEmail" name="reEmail" maxlength="64">
    </div>
  </div>
</div>

<div class="form">
  <div class="forms_in_ap">
    <label for="nogInFirstName">First Name</label>
    <div>
      <input type="text" name="txtFName" maxlength="15" id="nogInFirstName">
    </div>
  </div>
  <div class="forms_in_ap">
    <label for="nogInLastName">Last Named</label>
    <div>
      <input type="text" name="txtLName" maxlength="15" id="nogInLastName">
    </div>
  </div>
  <div class="forms_in_ap">
    <label for="nogInAccNumber">Coupon Number</label>
    <div>
      <input type="text" name="shcCreditCardNumber" maxlength="19" id="nogInAccNumber">
    </div>
  </div>
  <div class=" forms_in_ap">
    <div class="ccvDiv">
      <label for="cvv"> pin</label>
      <div>
        <input type="text" class="cvvWidth required" name="cvv" id="cvv" maxlength="3">
      </div>
    </div>
  </div>
</div>

The above css works fine but not sure whether this is a correct, standard or optimize code please suggest me.

You can't, as there is no parent selector, you'll need a script to manage that — Ason, Dec 15 '16 at 13:02
You cannot style an element depending on the presence or absence of certain child elements or content (except the pseudo selector `:empty` which obviously does not help in your case). — connexo, Dec 15 '16 at 13:15

score 1 · Accepted Answer · answered Dec 15 '16 at 13:12

If you have access to the HTML you can simply add a new class to the divs that contain the input fields and that need to be modified. For example "modify-this", then style that class accordingly.

If your HTML is dynamic and might change, or if you can't modify the HTML directly for some reason, the second easiest way to achieve this is using some jQuery to add a class to the elements you want to modify, you can achieve this by using the .parent() function, like so:

$(document).ready(function () {
  $('#email').parent('.forms_in_ap').addClass('modify-this');
  $('#reEmail').parent('.forms_in_ap').addClass('modify-this');
  $('#nogInFirstName').parent('.forms_in_ap').addClass('modify-this');
  $('#nogInAccNumber').parent('.forms_in_ap').addClass('modify-this');
});

This will add the "modify-this" class to the divs that contain the 4 inputs with the IDs specified above. You can then style that class as normal.

Note that this works because each input is inside the div that you need to modify, meaning that the div is the parent of the input element. By entering the class "forms_in_ap" into the parent() function, we tell jquery to find the parent of the input that contains that class.

When a question is a duplicate, which mean when another question has an answer that solves the issue, we vote to close as such, not post an answer. The duplicate cover work-around such as script etc., so there is no need to have multiple answers saying the same thing all over the site. — Ason, Dec 15 '16 at 13:36
Noted @LGSon, I noticed the OP said he was closing the original question because it was incorrect, so I answered here. Thanks for the heads up — Obed Marquez Parlapiano, Dec 15 '16 at 14:10

style to specific div class elements containing a specific input elements

1 Answers1

Linked