CSSの親クラス

Question

マイコードはこのようなものになります。

input{ 
 
... 
 
} 
 

 
label{ 
 
... 
 
}

<div class="textfield 1"> 
 
    <input tpye="text" id="fullname"> 
 
    <label for="fullname">Name</label> 
 
</div> 
 

 
<div class="textfield 2"> 
 
    <input tpye="text" id="fullname"> 
 
    <label for="fullname">Name</label> 
 
</div> 
 

 
<div class="textfield 3"> 
 
    <input tpye="text" id="fullname"> 
 
    <label for="fullname">Name</label> 
 
</div>

をコードがへの道であるので、今、私は唯一のテキストフィールドのいずれかにCSSを適用すると、

.textfield1{ 
 

 
    input{ 
 
    ... 
 
    } 
 

 
    label{ 
 
    ... 
 
    } 
 
     } 
 

 
.textfield2{ 
 

 
    input{ 
 
    ... 
 
    } 
 

 
    label{ 
 
    ... 
 
    } 
 
     }

：私はのような 『親クラス要素』を作成することができるかどうか聞いてみたいすべてのCSS要素に「.textfield1" の広告に長いです

これは、スタイル設定された要素をフォルダに入れるのと同じです。

これを行う方法はありますか？

ありがとうございます！

Answer 1

あなたは使用することができます。

.textfield1 input { 
    ... 
} 

.textfield1 label { 
    ... 
} 

チェックよりCSSセレクタの組み合わせは、このリンク：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Answer 2

カブはコメントで言及したように、あなたはクラス名にスペースを持つことはできませんが。したがって、textfield 1などのクラス名を使用する代わりに、textfield1などを使用できます。当分の間、私はtextfield1を使って解決策を実証しています。

さて、あなただけ適用する必要があり、与えられたCSSルールを指定するには、（クラス名とタグ名の間の矢印>に気づく）descendant selector.textfield1 inputまたはchild selector.textfield2 > input（クラス名とタグ名の間にスペースを注意してください）使用することができます特定のクラスの子孫または子供に

input{ 
 
    border: 2px solid blue; 
 
} 
 

 
label{ 
 
    color: blue; 
 
} 
 

 
.textfield1 input { 
 
    border: 2px solid red; 
 
} 
 

 
.textfield2 > input { 
 
    border: 2px solid yellow; 
 
}

<div class="textfield1"> 
 
    <input tpye="text" id="fullname"> 
 
    <label for="fullname">Name</label> 
 
</div> 
 

 
<div class="textfield2"> 
 
    <input tpye="text" id="fullname"> 
 
    <label for="fullname">Name</label> 
 
</div> 
 

 
<div class="textfield3"> 
 
    <input tpye="text" id="fullname"> 
 
    <label for="fullname">Name</label> 
 
</div>

Answer 3

あなたはSassのか少ないのようなプリプロセッサを使用する場合は、あなたの例のようにCSSをnastedすることができます。古典的な方法では不可能です。 CSSで

：

.textfield2 input{ 
... 
} 

.textfield1 input{ 
... 
} 

.textfield1 label, //<- if the label style of textfield1 and textefield2 are same 
.textfield2 label{ 
... 
} 

は注意してください、あなたのHTMLにあなたはテキストフィールドと数<div class="textfield 3">の間にスペースを持っています。 CSSクラスのテキストフィールドとのCSSクラスがあることを意味します。

1つのクラスを削除したい場合は、上記のスペースとコードを削除します。あなたがスペースを確保した場合

、ちょうどテキストフィールドと数間のドットで.textfield.2に.textfield2を変更