css - CSS グループ要素のショートカット

Question

多くの入力要素を持つ div があります。いくつかの入力をグループ化し、いくつかのスタイルを追加する必要があります。

div#tabs_add_invoice input#id_description,
div#tabs_add_invoice input#id_annotation,
div#tabs_add_invoice input#id_other {
    /*some style definition*/
}

そのためのショートカットはありますか？

Answer 1

そのためのショートカットはありますか？

はい。ID の代わりにCSS クラスを使用して要素を照合します。

入力要素は、同じクラスを割り当てることでスタイルを共有できます。お気に入り：

CSS

input.wideInput {
    width: 100%;
}

HTML

<div id="tabs_add_invoice">
    <input type="text" id="id_description" class="wideInput" /> 
    <input type="text" id="id_annotation" class="wideInput" /> 
    <input type="text" id="id_other" class="wideInput" />
    <input type="text" id="id_different" />
</div>

Answer 2

はい、グループ化したいdivに「クラス」を割り当てる必要があり
ます

<div id="div1" class="commonDiv"></div>
<div id="div2" class="commonDiv"></div>
<div id="div3" class="commonDiv"></div>
<div id="div4" class="commonDiv"></div>

CSS で、スタイルシートを commonDiv のみに与える必要があります。

.commonDiv {
  //Your styling goes here
}

Answer 3

入力には ID があるようです。これにより一意になるはずなので、親などを指定する必要はありません。例として、body div#content div#tabs_add_invoice input#id_descriptionと同じ#id_descriptionです。これは、以下が同じ仕事をすることを意味します。

#id_description,
#id_annotation,
#id_other {
    /*some style definition*/
}

またはこれでも、内部のすべての入力に影響します#tabs_add_invoice

#tabs_add_invoice input {
    /*some style definition*/
}