style to specific div class elements containing a specific input elements [duplicate] - html

Question

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
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.

Answer 1

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.