Style to specific div class elements containing 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.

Any element with an `id` just need its id in the rule, as there can only be one, so no need to have the parser going through anything more than that. For the reason of readability, one can use a parent elements class or similar, so when one look in the CSS file, it give you a hint of where those elements are placed in the markup. — Asons, Dec 15 '16 at 12:40
I'm voting to close this question as off-topic because I have asked this question wrongly so i am going to report the question again. — Dinesh Kumar, Dec 15 '16 at 12:52
Duplicate URL : http://stackoverflow.com/questions/41164692/style-to-specific-div-class-elements-containing-a-specific-input-elements — Dinesh Kumar, Dec 15 '16 at 12:54

Obed Parlapiano · Accepted Answer · 2016-12-15T12:54:01.370

Since you have each specific input with an HTML ID, there is no need for you to specify the parent class.

This should work for you, it's cleaner and simpler:

input#email,
input#reEmail,
input#nogInFirstName,
input#nogInAccNumber
{
  height: 42px;
}

The most important thing to remember here is that IDs are unique. You can't have two elements with the same ID, so adding the parent element when styling is not necessary.

Note about the "input": Since the IDs are unique, there's no need to have the "input" before the ID, but it can be seen as good practice for elements such as inputs to have the selector prior to the class/id, making it clearer what you're styling.

However, this doesn't apply to things like divs, since almost everything on the web is a div, adding it before a class/id is just overkill.

Style to specific div class elements containing specific input elements

1 Answers1