[HTML] 要素に一括でクラスを指定したい

Question

###前提・実現したいこと
HTMLで表のタイトルに、同じクラスを割り当てたいと思っています。
与えられているcssに、以下のようなクラスが用意されています。

.tableTitle {
    color: #ddd;
    background-image: -moz-linear-gradient(top, #334466, #223355);
    background-image: -ms-linear-gradient(top, #334466, #223355);
    background-image: -webkit-linear-gradient(top, #334466, #223355);
    background-image: linear-gradient(top, #334466, #223355);
}

HTML内の全てのテーブルヘッダに以下のように記述してももちろんいいのですが、
非常に冗長でばかばかしい気がしています。

  <table>
    <tr>
      <th class="tableTitle">.....
      <th class="tableTitle">.....
      <th class="tableTitle">.....
      <th class="tableTitle">.....
      <th class="tableTitle">.....

なので、別のcss内で以下のような指定ができればいいと思っています
（以下はあくまで例として提示している私の想像上のコードで、
実際にはこういう記述方法は通りませんが）

th{
   class: tableTitle ;
}

このように、cssを読み込んでいるhtml内の要素全体にクラスを
適用するような記述方法はないでしょうか。
ないわけはないような気がするのですが、どうも検索方法が悪いようで、
これというページにヒットせず、困っています。
以上よろしくお願いいたします。

Answer 1

.tableTitle tr として table にクラスを付けるのが正攻法かなと思います。

CSSの変更が不可能な場合は、JavaScriptで操作するのも手です。

---

cssを読み込んでいるhtml内の要素全体にクラスを適用するような記述方法はないでしょうか。

CSSでは出来ません。

Comments

[neeg]

ないわけがないと思っていたのですが、ないのですね！　驚きました。
なんでないんでしょう。にわかには信じられません。。。。

cssは残念ながら変更することができません。thだけではなく、
ブロック要素の背景などにも使用されているので、、、
ただ、確かにJavaScriptで操作するという方法はあるな、と思いました。
ちょっと見られたくないソースになってしまいますが。。。

非常に参考になりました。ありがとうございました。

[kei344]

> にわかには信じられません。。。。
CSSはスタイルを指定するためのものです。クラスを動的に割り付けるのはスタイルの指定ではなく構造の変更になるので、当然かと思います。そもそもCSSが変更できれば問題が無いですよね。
.tableTitleWrap th, .tableTitle {/*指定*/}

[neeg]

ご回答ありがとうございます。
自分の中でちょっとしっくり来ていない部分があるので、もしよろしければヒントをいただきたいのですが。。。

今までcssに対してずっと持っていたわだかまりのようなものがありまして。。。
学習し始めの頃は、たとえば表の中の、大項目のタイトルと小項目のタイトルがあるとしたら、以下のような記述ができるのが当然だと思っていました。

.tableTitle { /* 背景と文字色のみ定義 */
color: #ddd;
background-image: -moz-linear-gradient(top, #334466, #223355);
background-image: -ms-linear-gradient(top, #334466, #223355);
background-image: -webkit-linear-gradient(top, #334466, #223355);
background-image: linear-gradient(top, #334466, #223355);
}

/* 各項目のフォントサイズとパディングを定義 */
.largeTitle {
class: tableTitle ;
font-size: 16pt;
padding: 5px;
}

.midTitle {
class: tableTitle ;
font-size: 13pt;
padding: 3px;
}

.smallTitle {
class: tableTitle ;
font-size: 10pt;
padding: 2px;
}

ただ、どう調べてもこういう記述方法はなく、どうもcssには「定義の再利用」という概念がないらしい、と。これがどうにも納得できないというかしっくりきません。
そういうニーズがない、ということだとしたら、こういうことをする必要がないほどシンプルな他の方法があるということだと考えているのですが、どうするのが一般的なんでしょうか。

たとえば、以下のようなフォントサイズとパディングだけを定義した、別のクラスを作成し

.largeTitle {
font-size: 16pt;
padding: 5px;
}

HTMLの方で、その都度以下のように、動的に合成するのでしょうか？

<div class="tableTitle largeTitle">...
<div class="tableTitle midTitle">...
<div class="tableTitle smallTitle">...

こういうことだと、htmlを書くたびに、どのクラスにどういう定義があって、どれとどれを合成しないとこういうスタイルにならなくて……という、中身を意識しながらの煩雑なコーディングになってしまうため、スタイルの組み合わせをまとめて塊にする、クラスの意味が半減してしまう気がするのですが、そういうものなのでしょうか。
初学者なもので、なにかとんちんかんなことを言っているかもしれませんが、ご助言をいただければありがたく思います。

[tacsheaven]

class は複数持つことができるので、個々に小さなクラス定義を用意し、実際に使うに当たっては複数のクラスを組み合わせた方が良い、のです。
例えば入力フォームで、ある条件が満たされている場合に項目の背景色を変えることを考えます。もし入力フォームが5個あって、width や height も個々に指定しているとしたら、クラス定義が倍の10個になってしまいます。背景色を指定するためだけのクラスを用意しておけば、そのクラスの add/remove だけで済むのですから、クラスの定義数は一つ増えるだけです。
※実際には attr を直接弄ってしまうことでそこまでひどくはなりませんが

[kei344]

To: neegさん
> どうもcssには「定義の再利用」という概念がないらしい
スタイルの再利用のために作られたものだと私は思っています。なので何と比べられているかはわかりませんが、実際再利用はしています。CSSフレームワークと呼ばれるものが複数有るので、どういうロジックで組まれているかを見てみてはいかがでしょう。

> その都度以下のように
例えば、
<div class="tableTitle">
<div class="largeTitle">...</div>
<div class="midTitle">...</div>
<div class="smallTitle">...</div>
</div>
.tableTitle > div {}
とか 構造で書くことは減らせますよね。無駄にクラスが増えるのであれば設計の問題かもしれません。

> htmlを書くたびに、どのクラスにどういう定義があって、どれとどれを合成しないとこういうスタイルにならなくて
それは書かれている「class: tableTitle ;」が使えたとしても同じことですよ。

ただ、簡単にCSSを書くためのものとしてSASS / SCSS / LESS などが有るので、興味があれば検索してみてください。

[neeg]

すみません、私が言ったのはスタイルの再利用ではなく、定義の再利用についてでした。
どうも私の言いたいことがうまく伝えられないのですが、その過程で非常に得るものがありました。ありがとうございました。

[neeg]

> tacsheavenさん
> class は複数持つことができるので、個々に小さなクラス定義を用意し、実際に使うに当たっては複数のクラスを組み合わせた方が良い、のです。
私は、そのくらいの粒度が適切か、というラインがあるように思っています。
少なくとも、小さい方が良いということであれば、クラスなど定義せずに、一つ一つの要素に対して、style="....と指定していけば万能のはずですから、それはないように思います。
で、ではどういう粒度が適切なのか、ということになるのですが、例えば色で分ける、大きさで分ける、、、と言うような直行する分類方法があるとして、実際に使用するときはそれを組み合わせる、、、というのは確かにわかります。
ただ、実際に指定するときに、
class="width500 fontsize12 color-111 backcolor-fff"
という指定をすることが
style="width:500; fontsize:12pt; color:#111; background-color:#fff;"
とどれだけ違うのかという疑問があります。
仮にそれぞれが10通りあるとして、10*10*10*...通りの組み合わせ全部使うのか、というと現実的にはそんなことはなくて、例えば入力画面ではこういう組み合わせ、確認画面ではこういう組み合わせ、、、というように、数種類に落ち着くように思うわけです。
そういうことなら、デザイン的な特徴を表すような命名されるクラスをいくつも作って組み合わせるより、意味的な命名、例えば、.questionPageTextArea とかというような、意味を表すクラスを少数作った方がわかりやすい。
ただ、じゃあ別のページの.answerPageTextAreaを作るときに、おそらくはほとんど内容が重複しているであろう.questionPageTextAreaの内容をべったり打つのはばかばかしいし、メンテナンス性が悪くなる。
ので、
.baseTextArea{
.....
}
.questionPageTextArea{
class baseTextArea;
background-color: #eee;
}
.answerPageTextArea{
class baseTextArea;
background-color: #ffd;
}
ということができるはずだよね？
という風に思っていた、という次第です。

[neeg]

かなり日がたってしまいましたが、、kei344さんがおっしゃっている
意味が腑に落ちたのでアップデートします。

先日、Web系の友人と話す機会があったので尋ねてみたところ

- それはお前の言うとおり。
- cssはその辺がマジでクソ。
- というわけで、今時cssなんて直で書いているヤツはいない。
- SCSSとかLESSとか使うのが常識。

ということでした。

kei344さんが
> 簡単にCSSを書くためのものとしてSASS / SCSS / LESS などが有るので、

とおっしゃっていて、当時その辺を調べたはずなのですが、その時は
切り口が悪かったのか、自分のニーズに合っているという感じを
受けませんでした。
ですが、先日友人に内容を教えてもらったところ、そう！まさにそれ！
ということになりました。
改めてお礼申し上げます。ありがとうございました。

Answer 2

このようなセレクタで指定することもできます

tr:first-child > th {
    color: #ddd;
    background-image: -moz-linear-gradient(top, #334466, #223355);
    background-image: -ms-linear-gradient(top, #334466, #223355);
    background-image: -webkit-linear-gradient(top, #334466, #223355);
    background-image: linear-gradient(top, #334466, #223355);
}

Comments

[neeg]

申し訳ないです。
「与えられたcssがある」と書いたのは、それは「与えられたものだから変更はできない」という意味を込めておりました。
プロジェクト全体で使用するものなので、このような変更をすることはできないのです。
もちろん内容をコピーして別のcssを作っても良いのですが、それでは将来変更があったときに反映されず、共通で使っている意味がないので不可なのです。

Answer 3

一応 CSS セレクタとしては「*」で「全ての要素」を表すことは表すのですが……まあこれを使うことはまずないですね。なぜなら CSS は Cascading の単語が示す通り、子孫に対して波及しますから、親で指定した属性が子孫に受け継がれます。親とその子孫とで別の属性を付けたい、というときでもない限り使うことがないです。

table {
  padding: 5px;
  margin: 5px;
}
table * {
  padding: 2px;
  margin: 2px;
}

とかくらいですかね。

Comments

[neeg]

うーん、申し訳ないのですが、ちょっとご回答の意味が理解できません。
おっしゃっていることはわかるのですが、私の質問のどの部分に対して、これが回答になっているのか、というところが理解できません。
これをどう使うと、私が困っていることが改善されるのでしょうか。

[tacsheaven]

> このように、cssを読み込んでいるhtml内の要素全体にクラスを適用するような記述方法はないでしょうか。
この部分です。「要素全体」という CSS セレクタ定義がある、というだけです。
body.onLoad のイベントハンドラで CSS セレクタ使って強引に全要素にクラス適用する手もなくはない、という程度です。

[neeg]

あ、なるほど。
すみません、書き方が悪かったです。
要素全体というのは、「tr要素全体」というような意味でした。失礼しました。

Answer 4

classだけで解決出来ない場合にはIDも使って下さい。
child属性やnotなどの疑似要素、oddなど色々組み合わせれば大体のことは出来ます。
が、cssは予め用意されたhtml構造に対してスタイルを定義するための物であって、
html構造の問題を解決するための物ではありません。htmlの構造の問題はhtml側で解決するべきです。
最近のCSSフレームワークなどはフルスクラッチしたくない方には便利かもしれませんが、
cssフレームワークを利用するためにhtml構造に制限を設けられる場合も多く、本末転倒かなと思う場合も多いです。
特に、未だにテーブルなどで複雑な構造をしているhtmlの殆どはhtml側に問題があります。

Comments

[neeg]

うまく表現できていなかったかもしれませんが、私はこれはhtml構造の話をしている意図はありませんでした。
cssで定義したクラスを、別のクラス定義の中で再利用できないのか？というのがそもそもの疑問です。
例えばJavaなんかでは、クラスを定義して、それを別のクラスを構成する要素として再利用したり、一つのクラスを基底として別のクラスを作成するというような、定義を再利用して、メンテナンス性を高める仕組みがさまざま用意されているのですが、そういう仕組みはないのだろうか？という疑問を持っていました。