ＣＳＳに同様の内容を別名称でまとめて設定

質問

ＣＳＳに同様の内容の設定を別の名称で作成したいのですが簡単な方法ありますでしょうか。

具体的には

test {
color: red
}
test2 {
color: red
}

のような設定を行うのに簡単な記述はありますでしょうか。

もしくは設定を名称をしていして継承するということは可能でしょうか？

どうしてもjQueryでCSS名での指定を行いたいためです。(別の指定方法は不可です。)

よろしくお願いします。

回答No.2

play_with_you · ベストアンサー

相変わらずジジイは質問に答えねえな（笑）
test1なんか「例」に決まってんだろ（笑）

test1, test2 {
　color: red
}

とカンマで区切って並べてください。
詳しくは「CSS　セレクタ 複数」で検索。
ちなみにカンマを忘れると「test1の中のtest2」に適用するという意味になってしまうので注意。これも上記の検索結果の中で出てくると思います。

更に言うと、まったく同一のスタイルを設定するなら、両者に同じclassを追加したほうが話が早いです。

回答No.3

fujillin

ご質問文中のtestやtest2が何らかのセレクタを意味しているとするなら、
　test, test2 { color : red; }
で可能では？

＞jQueryでCSS名での指定を行いたいためです。
何か勘違いしているような…
「CSS名」という概念はないと思いますけれど、スタイルシートそのものを編集したければ、スタイルシートのデータを書き換えることで可能ではありますが、そういうことを考えているわけではないですよね？
通常は、CSSと同様のセレクタを用いて要素を特定し、style属性を指定（設定）している場合が多いと思います。
その場合は、初期設定のＣＳＳの記述方法はほとんど関係しないはずです。

スクリプトからstyle属性に設定するスタイルは、個々の要素のstyle属性を定義していますので、HTMLソースに記述するstyle="～"の部分を書換えているようなイメージとなります。
このような直接属性を変更する方法のほかに、クラス属性を変更することで適用するスタイルを変えるという方法が通常は用いられていると思います。
上記のスタイルシートの定義そのものを書き換える方法はあまり用いられていないと思いますが…

回答No.1

ORUKA1951

{の前にかかれたものはセレクタですが、testとかtest2とかかれると、それはタイプセレクタになります。しかし、少なくともHTMLにはこれらの要素はありません。
　⇒5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
　⇒6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
をしっかりお読みください。color:redなどのプロパティより、先に確実に身につけておかなければなりません。
　このふたつを理解していたら、この質問はないのではないかと・・

jQueryでclass名での指定と言う意味がわからないのですが、スタイルシートのクラスセレクタは、「スペースで区切られたclass属性値のリストのひとつにマッチするもの」を指定する要素セレクタの一種（class~=）とまったく同じものです。
　<span class="first name male">山田</span><span class="second name male">太郎</span>、<span class="first name female">田中</span><span class="second name female">陽子</span>、<span class="first name male">鈴木</span><span class="second name male">健太</span>・・
　なら、
span.first.name{font-weight:bold;}
span.second.name{font-style:italic;}
span.name.male{color:blue;}
span.name.female{color:red;}
span.name{text-decoration:underline;}
span.female,span.male{background-color:yellow;}
と、書けます。セレクタの意味はわかりますよね。

　本来、class名やidは「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」ものですから、そこで迷うことはないはずです。
　統一的なプレゼンテーションをしたいのでしたら、必ずそのようにHTMLがマークアップされているはずだからです。
[例]
body>div.section>p{}なら、bodyの直接の子孫である本文の段落は・・・
div.section p:first-child{font-weight:bold;}本文最初の段落は・・・
　と、
　なぜなら、共通の設定をしたいと言うことは、共通点があるということですから!!それが出来ないとしたら、HTMLのマークアップ不足です。HTMLはデザインのためではなく、文書構造だけをマークアップするという基本に帰って見ます。