cssで定義したクラス情報をcssセレクタ内で使用

Question

cssで文字装飾用の以下のクラスを作成しました。 .label { font-size:95%; color:blue; } これを

ラベル1ラベル2～(以降大量に続く)

というhtmlに適用したいのですが、spanタグ全てに.labelを指定するのは見辛さからいっても避けたいと思います。出来れば　#view span　{ 　　.label 　} というようにcssで対象を選択して既存のクラス定義を適用したいのですが、こういう感じで一気に適用する記述方法はありませんでしょうか。

naokita · Accepted Answer

No.3.8 naokitaです。複数のページや特定箇所以外にも、 class="label"があって、特定の箇所の大量に続くspanが想定する場所のspanを class="label"未使用で、他のclass="label"と統一したいって事ですね？更に、.label{ } と #view span{ } とを一箇所のみ（一発/一気）で一元管理したいんですね？ ----- 今現在、２つのセレクタがあります。 .label{ } と #view span{ } この場合、当然、２つの同じ値も存在するので、変更時は、２カ所の変更が必要だから、一元管理とはいえません。よって、２つのセレクタを一箇所で統一設定します。１カ所だけの変更なら、一元管理と言いますね！？＞＞あくまで一元管理したいんですよ。１カ所だけの値を変更すれば、他のHTMLの .label と特定箇所の #view span を同時に変更は出来る。セレクタで値を定義するが、値をセレクタで定義は出来ない。（属性セレクタを除く）だから、セレクタと同じ値を持つセレクタを同時に定義するって事！これをCSSの「一元管理」と言う。つまり、 .label と #view span を同時に指定し、値を統一する事。 .label , #view span{ color:blue;} ■ まずは、下部のソースを表示してから、CSSを変更しましょう。　　　　　　↑↑↑↑↑↑↑↑↑ １、下部のソースを表示すると、「青」が見えると思います。２、color:blue; を color:green; に一箇所変更すると、　　id="view"とid="view"以外のところも変更します。 ※これが、CSSでの「一元管理」です！このソースで１カ所で「color:green;」と変更できても一元管理では無いと言うのなら、動的に出力するしかないです。 class名をインクルードしましょう。但し、適応させる為に別の動的ソースが必要です。単に、CSSと同じですが、動的に一箇所で管理出来ます。また、更に面倒なプログラムで書けば、ボタン選択で適応させる事も可能。それも面倒だというなら、XML,XSLで書いて下さい。 http://ja.wikipedia.org/wiki/Extensible_Markup_Language spanで統一させる事すら必要はありませんから。これならお望み通りの事が出来るでしょう。 -----

CSS一元管理 | 色比較

以下は、id="view"以外のHTML

青 | 赤 | 青 | 赤 | 青

上のHTMLソースが146文字

以下は、id="view"

view"> 青 | 赤 | 青 | 赤 | 青

上のHTMLソースが104文字

一箇所の値を変更するだけで、全部適応されますが・・・

あとは、頭を柔軟に、貴方のHTML,CSSの書き方次第で、どうにでもなります。

naokita · Answer

NO.3回答者のnaokitaです。整理ではなく補足事項ではないでしょうか？当初の質問内容からならば、前回答者さん達は正解です。 ------- ORUKA1951さんの例は、IE6を除外した子セレクタや隣接セレクタなので質問者さんと話が合わないんじゃないのかな? それは、別として、 -------

というのは、IDですからページに１カ所しか存在しないはずです。当初の質問では、その#viewの中のspanをラベル1ラベル2 とするのは、非効率だから、 class="label"を書かずに、ラベル1ラベル2 だけで、spanに、 { font-size:95%; color:blue; } を適応させたいって事ですよね？誰もが、質問を読んでも、そう理解するはずです。引っ掛かったのは、#view span{.label}の部分です。こんな仕様は、CSSにありませんから、回答としては、「出来ません！」となります。そこで、上記の条件で他の方法をCSSだけで考えると、

の中だけのをfont-size:95%; color:blue;にするには、 #view span{ font-size:95%; color:blue;} です。更に、他のページやセレクタをも考慮するから、他の class="label"と#view内のspanに適応する為、 .label,#view span{ font-size:95%; color:blue;} のようにすると条件が満たされます。 ---- 他の補足を読む限りでも、　＞「この宣言を、特定の要素内のspanに適用したい。」　＞というのが希望している内容であります。特定の要素というのが、

って事ですよね？その中の全てのspanに適応されるって事だから、 #view span{ font-size:95%; color:blue;} で問題無いです。（パソコンの新旧ブラウザなら適応されます） ---- 条件が満たされないというのであれば、もしかして、以下の様にラベル1ラベル2 その特定の要素に別の指定（赤81%）などにしたいが複数あるなら、青95%青95%赤81%青95% のように「赤81%」のspanも存在するという状況で、青95%青95%赤81%青95% として、 .label , #view span{ font-size:95%; color:blue;} #view span.labe3{ font-size:81%; color:red;} と部分的に上書き。それでも、青95%青95%赤81%青95% などと書くよりは、かなり効率的です。この様に、主とするspanを#view span{}で割り当てれば良い事です。 ---- spanが複数あって分けたいのなら、その#viewに無い（span以外）ような適当なタグを使えば済む。例えばを適応すれば済む話。 青95%青95%赤81%青95% .label , #view b{ font-size:95%; color:blue; font-weight:normal;} #view span.labe3{ font-size:81%; color:red;} ---- No.6さんの例なら、 .label , div.section span{ font-size:95%; color:blue;} No.6での補足なら、 .label , div.label span{ font-size:95%; color:blue;} .label , を追加するだけ。 ---- 全て試して違うなら、動的に出力に。

SAYKA · Answer

んー？ブラウザの実装具合によるけど(具体的にはIE6とか古いのを排除するなら) .label{/*省略*/} #view span{color:red;}

これだとspanじゃない部分がどうって言う話だよね？確か。 .label,#view.label span,{font-size:95%;color:blue;} #view.label span{color:red;}

後から書いた部分だけ上書きされるからサイズ95%の赤にならない？これで。こういうのもやだっていうなら　もうperlやphp使って独自includeスクリプト書くしかないんじゃないかな

ORUKA1951 · Answer

＞あくまで「この宣言を、特定の要素内のspanに適用したい。」というのが希望している内容であります。　ですから、それは子孫セレクタか子供セレクタをつかいます。 div.section span{font-weight:bold;}で、classの値配列にsectionをもつ【特定の】div要素内のspan要素に適用されますし、div.section>span)color:red}で、classの値配列にsectionをもつ【特定の】div要素内の直接の子供であるspan要素に適用されます。

見出し

なんたらかんたらは重要(1)である。

　重要(2)

で、重要(1)は太字で、重要(2)は太字でかつ赤く表示されます。

ORUKA1951 · Answer

補足を拝見しましたが、それを読む限りでは、No.2で説明した方法でよいはずです。
きちんと読んでますか？

最初の質問にもある
＞というhtmlに適用したいのですが、spanタグ全てに.labelを指定するのは見辛さからいっても
避けたいと思います。
　また補足の
＞なので、まずセレクタで適用範囲を("#view span"のように)指定し、その範囲に用いたい
＞クラスを指定するというような方法が無いのかが知りたいというのが主旨です。
　もしかり。

No.2の記事をしっかり読んでください。

＞cssで文字装飾用の以下のクラスを作成しました。
＞.label { font-size:95%; color:blue; }

これはCSSの文法を明らかに理解されていないようです。
　この一文は「宣言ブロック」です。!!!
　そして、.labelは全称セレクタや要素セレクタを省力した記述方法で本来は
*.[class~label]と等価で、その省略形です。
　意味は、class要素の値リストにlabel1をもつすべての要素に適用させるというセレクタ文字列です。
REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )
　をしっかり読むこと。でないと何を質問しているかを伝えることすらできないです。

あなたの質問を翻訳すると
　{ font-size:95%; color:blue; }という宣言ブロックを、class要素の値リストにlabel1をもつ【すべての】要素に適合するように記述しました。
　注)「上記クラスはspanタグに対して使う為に作成したものです。」は誤りですね。
　　　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　　すべての要素に適用されます。

spanに適用するなら
　　　 span.label1{}
　　　^^^^^^^^^^^^でなければなりませんね。!!
　5.8.3 クラスセレクタ（Class selectors） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html )

{ font-size:95%; color:blue; }
　もしこの宣言を、特定の要素内のspanに適用したい。たとえば、classのリスト値にsectionを持つdiv(無名ブロック)内のspanでしたら
div[class=~label1] span{font-size:95%; color:blue;}
省略して
div.label1 span{font-size:95%; color:blue;}
とかけます。このときspanの前にある半角スペースは、「子孫セレクタ」を示します。言い換えると
div[class=~label1]の傘下にあるすべてのspanを指定するセレクタ文字列です。
これを直接の子供だけに適用したいなら
　div.label1>spanになります。

実際に、No.2で示したHTMLとCSSを試してください。

以上があなたがしたいことに対する回答です。

abacabu · Answer

趣味でWEBサイトを作ってる者です。が仮にその色を変える対象しかないなら span{......}でよいかと。もしべつにもあるなら他の回答者様のような div#view span{.....} ←質問にも特にid指定、class指定なかったので。一応「id」と「class」の使い分けは、「id」.....

naokita · Answer

３回読んでやっと意味が分かりました。それはできませんし、それができたとして、

ラベル1ラベル2～(以降大量に続く)

とする方が、非現実的です。他のHTMLでも class="label"があると仮定して、 .label , #view span { font-size:95%; color:blue; }

ラベル1ラベル2～(以降大量に続く)

と、HTML側はにままで、CSSに , #view span を追加。

ORUKA1951 · Answer

質問の意図がわからないのですが・・ CSSの文法上、規則集合と宣言ブロックになります　CSS2の構文と基本データ型 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#q8 ) 　から、 #view span　{ 　　.label 　} はできません。　.label という記述の意味をまず理解してください。これは HTML内の

という要素をさしますが、これは　属性セレクタ　div[calss=~label]・・・class属性に空白で区切られた値にlabelを持つ要素の省略形です。div.label と、div .label は異なる。　あなたのしたいことが、#view一意セレクタ（ID selectors）内のspan要素に適用したいのでしたら div#view span という子孫セレクタでよい。直接の子供だけなら div#view>span (子供セレクタ（Child selectors）)をつかう。

あいうえおかきくけこさしすせそたちつてと

　　あいうえおかきくけこさしすせそたちつてと　

CSS div#ABC p{color:red;} div#ABC p span{color:blue;} div#ABC div span{clor:green; div#ABC p>span{color:magenta;} div#ABC div span+span+span{color:purple;} div#ABC div span+span+span+span{color:yellow;} とか

SAYKA · Answer

#view span.label,.label{}

じゃ　だめ？

cssで定義したクラス情報をcssセレクタ内で使用

No.3.8 naokitaです。

この回答への補足

NO.3回答者のnaokitaです。

この回答への補足

んー？

この回答への補足

＞あくまで「この宣言を、特定の要素内のspanに適用したい。

この回答への補足

補足を拝見しましたが、それを読む限りでは、No.2で説明した方法でよいはずです。

この回答への補足

趣味でWEBサイトを作ってる者です。

この回答への補足

３回読んでやっと意味が分かりました。

この回答への補足

質問の意図がわからないのですが・・

この回答への補足

#view span.label,.label{}

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング