特定の入力要素を含む特定のdivクラス要素へのスタイル

Question

私のページには、以下の入力テキスト要素があります。実際には、すべてのMACとIOSデバイスのSafariブラウザで#email、#reEmail、#nogInFirstName、#nogInAccNumber要素だけを含むforms_in_apクラスの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コード：

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

上記のCSSはこれが正しいかどうか確認してください正常に動作しなく、特定の事業部の特定の要素にスタイルを適用する

CSS標準または最適化コードを教えてください。

Answer 1

HTMLにアクセスできる場合は、入力フィールドを含むdivを変更する必要があるdivに新しいクラスを追加するだけです。たとえば、 "modify-this"のように、そのクラスに応じてスタイルを設定します。

HTMLが動的で変更される可能性がある場合、または何らかの理由でHTMLを直接変更できない場合、これを達成するための2番目に簡単な方法は、いくつかのjQueryを使用して、あなたはそうのように、.parent（）関数を使用することによって、これを達成することができます：

$(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'); 
}); 

これは、上記の指定されたIDを持つ4つの入力が含まれているdiv要素に「モディファイこの」クラスを追加します。そのクラスを通常どおりにスタイルすることができます。

これは、各入力が変更が必要なdiv内にあるため、divが入力要素の親であることを意味します。 parent()関数に "forms_in_ap"クラスを入力することによって、jqueryにそのクラスを含む入力の親を見つけるよう指示します。