- ベストアンサー
CSSセレクタを使用してクラスを一括で適用する方法
- CSSセレクタを使用してクラスを一括で適用する方法を教えてください。
- CSSセレクタを使用してクラスを一括で適用する方法を知りたいです。
- CSSセレクタを使って複数の要素に一括でクラスを適用する方法を教えてください。
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
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で統一させる事すら必要はありませんから。 これならお望み通りの事が出来るでしょう。 ----- <html> <head> <style type="text/css"><!-- .label , #view span{ color:blue;} /* ←ここ１カ所のみ */ .red , #view span.re{ color:red;} --></style> </head> <body> <div id="test"> <h1>CSS一元管理 | 色比較</h1><hr> <h2>以下は、id="view"以外のHTML</h2> <div id="<b>test</b>"> <span class="label">青</span> | <span class="re">赤</span> | <span class="label">青</span> | <span class="re">赤</span> | <span class="label">青</span> </div> <p>上のHTMLソースが<q><strong>146</strong>文字</q></p> </div><hr> <div id="view"> <h2>以下は、id="view"</h2> <div id="<big class="re">view</big>"> <span>青</span> | <span class="re">赤</span> | <span>青</span> | <span class="re">赤</span> | <span>青</span> </div> <p>上のHTMLソースが<q><strong>104</strong>文字</q></p> </div><hr> <h3>一箇所の値を変更するだけで、全部適応されますが・・・</h3> <p>あとは、頭を柔軟に、貴方のHTML,CSSの書き方次第で、どうにでもなります。</p> </body> </html>
その他の回答 (8)
- naokita
- ベストアンサー率57% (1008/1745)
NO.3回答者のnaokitaです。 整理ではなく補足事項ではないでしょうか？ 当初の質問内容からならば、前回答者さん達は正解です。 ------- ORUKA1951さんの例は、IE6を除外した子セレクタや隣接セレクタなので 質問者さんと話が合わないんじゃないのかな? それは、別として、 ------- <div id="view">というのは、IDですから ページに１カ所しか存在しないはずです。 当初の質問では、 その#viewの中のspanを <span class="label">ラベル1</span><span class="label">ラベル2</span> とするのは、非効率だから、 class="label"を書かずに、 <span>ラベル1</span><span>ラベル2</span> だけで、spanに、 { font-size:95%; color:blue; } を適応させたいって事ですよね？ 誰もが、質問を読んでも、そう理解するはずです。 引っ掛かったのは、#view span{.label}の部分です。 こんな仕様は、CSSにありませんから、 回答としては、「出来ません！」となります。 そこで、 上記の条件で他の方法をCSSだけで考えると、 <div id="view">の中だけの <span>を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に適用したい。」 ＞というのが希望している内容であります。 特定の要素というのが、 <div id="view">って事ですよね？ その中の全てのspanに適応されるって事だから、 #view span{ font-size:95%; color:blue;} で問題無いです。（パソコンの新旧ブラウザなら適応されます） ---- 条件が満たされないというのであれば、 もしかして、以下の様に <span>ラベル1</span><span>ラベル2</span> その特定の要素に別の指定（赤81%）などにしたい<span>が複数あるなら、 <span>青95%</span><span>青95%</span><span>赤81%</span><span>青95%</span> のように「赤81%」のspanも存在するという状況で、 <span>青95%</span><span>青95%</span><span class="labe3">赤81%</span><span>青95%</span> として、 .label , #view span{ font-size:95%; color:blue;} #view span.labe3{ font-size:81%; color:red;} と部分的に上書き。 それでも、 <span class="labe">青95%</span><span class="labe">青95%</span><span class="labe3">赤81%</span><span class="labe">青95%</span> などと書くよりは、かなり効率的です。 この様に、主とするspanを#view span{}で割り当てれば良い事です。 ---- spanが複数あって分けたいのなら、 その#viewに無い（span以外）ような適当なタグを使えば済む。 例えば<b>を適応すれば済む話。 <b>青95%</b><b>青95%</b><span class="labe3">赤81%</span><b>青95%</b> .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 , を追加するだけ。 ---- 全て試して違うなら、動的に出力に。
補足
えっとですね、naokitaさんもやはりORUKA1951さんと同様の解釈をされているかと思うのですが、 初めの質問でも整理した補足でも要件としましては一貫して ------------------------------------------------------------- 出来れば #view span { .label } というようにcssで対象を選択して既存のクラス定義を適用したい ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ ------------------------------------------------------------- という事なのです。 例題に挙げるくらいなのですから当然上記の書き方が不可能なのは存じております。 あくまで「予め.labelといった定義を作成」しておき、「#view spanのように対象を指定してそこに .labelという定義を適用する」という方法をお聞きしたいという事です。
- SAYKA
- ベストアンサー率34% (944/2776)
んー？ ブラウザの実装具合によるけど(具体的にはIE6とか古いのを排除するなら) .label{/*省略*/} #view span{color:red;} <div id="view" class="label"><span /><span /><span /><!-- --></div> これだとspanじゃない部分がどうって言う話だよね？確か。 .label,#view.label span,{font-size:95%;color:blue;} #view.label span{color:red;} <div id="view" class="label"><span /><span /><span /><!-- --></div> 後から書いた部分だけ上書きされるからサイズ95%の赤にならない？これで。 こういうのもやだっていうなら もうperlやphp使って独自includeスクリプト書くしかないんじゃないかな
補足
＞後から書いた部分だけ上書きされるからサイズ95%の赤にならない？これで。 んー、そこだけ見るとそうはなるんですがやっぱり違うんですよね。 #view.label span{color:red;} という記述で上書きすると確かに赤字にはなりますが、他のHTML等で.labelを使用している箇所は そのままですよね。あくまで一元管理したいんですよ。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞あくまで「この宣言を、特定の要素内のspanに適用したい。」というのが希望している内容であります。 ですから、それは子孫セレクタか子供セレクタをつかいます。 div.section span{font-weight:bold;}で、classの値配列にsectionをもつ【特定の】div要素内のspan要素に適用されますし、div.section>span)color:red}で、classの値配列にsectionをもつ【特定の】div要素内の直接の子供であるspan要素に適用されます。 <div class="section"> <h2>見出し</h2> <p>なんたらかんたらは<span>重要(1)</span>である。</p> <span>重要(2)</span> </div> で、重要(1)は太字で、重要(2)は太字でかつ赤く表示されます。
補足
ご回答ありがとうございます。 div.label span{font-weight:bold;} ("section"とありましたが"label"に合わさせてもらいます) という記述ですが、これは「この宣言を、特定の要素内のspanに適用したい。」の「この宣言」つまり .label { font-size:95%; color:blue; } を使用していませんよね？仮に.labelがdiv.label spanより先に宣言されていたとしても単なる上書きで あり要件を満たしておりません。 例えば.labelのcolorをredに変更したとき、div.label spanという宣言部に対しても変更が必要となり、 これでは.labelを宣言した意味が低減してしまいます。 ですのであくまで「この宣言」をそのまま用いたいのです。 ご回答の程宜しくお願い致します。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
補足を拝見しましたが、それを読む限りでは、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を試してください。 以上があなたがしたいことに対する回答です。
補足
ご回答ありがとうございます。 No.2でのご回答を私が理解していないとお思いでしょうが、ちゃんと読ませて頂いております。 その上で若干齟齬があるようなので詳細に返答させて頂きたいと思います。 まず、 ＞注)「上記クラスはspanタグに対して使う為に作成したものです。」は誤りですね。 これについては全く誤りではありません。あくまで「私がspanタグに対して使う」と決めて作成した クラスであり、「spanタグに適用されるように作成した」とは書いておりません。 この辺りは単純に日本語の問題なのでこれでご理解頂けるかと思います。 蛇足ですが、これが適用されるのは「class属性に"label"を指定した」要素のみであり、 仰っている「すべての要素に適用されます。」というのは相応しくないと思います。 ＞もしこの宣言を、特定の要素内のspanに適用したい。たとえば～ 上記ですが、仰るとおり「この宣言を、特定の要素内のspanに適用したい。」のですが、 以降のご説明およびNo.2のご回答はこの要件を満たしておりません。 なぜなら「div.label1 span{font-size:95%; color:blue;}」と直接CSSの内容を記述しているからです。 あくまで「この宣言を、特定の要素内のspanに適用したい。」というのが希望している内容であります。 つまり予め宣言した「.label」を活かせないと意味が無いのです。 以上、お手数をお掛けしておりますがご回答の程宜しくお願い致します。
- abacabu
- ベストアンサー率37% (250/663)
趣味でWEBサイトを作ってる者です。 <span>が仮にその色を変える対象しかないなら span{......}でよいかと。 もしべつにもあるなら他の回答者様のような div#view span{.....} ←質問にも特にid指定、class指定なかったので。 一応「id」と「class」の使い分けは、 「id」.....<div id="header">など他に出現しない使い方。 「class」......<p class="note emph">など複数指定する場合 p.note{color:red} p.emph{text-decoration:underline} どちらも指定出来ますがこの様な感じで特定のspanにだけidもしくはclassをしていする。 こんなかんじでどうですか？ ちなみに<div id="note">→div#note{....} <div class="note">→div.note{....} となります。 知ってたらごめんなさい。
補足
ご回答ありがとうございます。 すいません、質問内容がまとまっていなかったので整理します。 .label { font-size:95%; color:blue; } 上記クラスはspanタグに対して使う為に作成したものです。このクラスは複数のhtmlファイルから 使用される事を想定しており、またhtmlファイル内でも複数の箇所で使用されます。 これをSPANタグに適用しようとすると、普通は「<span class="label">」と書きますが、spanタグは 大量にあるためこれはなるべく避けたいのです。 なので、まずセレクタで適用範囲を("#view span"のように)指定し、その範囲に用いたいクラスを 指定するというような方法が無いのかが知りたいというのが主旨です。
- naokita
- ベストアンサー率57% (1008/1745)
３回読んでやっと意味が分かりました。 それはできませんし、それができたとして、 <div id="view"> <span class="label">ラベル1</span><span class="label">ラベル2</span>～(以降大量に続く) </div> とする方が、非現実的です。 他のHTMLでも class="label"があると仮定して、 .label , #view span { font-size:95%; color:blue; } <div id="view"> <span>ラベル1</span><span>ラベル2</span>～(以降大量に続く) </div> と、HTML側は<span>にままで、CSSに , #view span を追加。
補足
ご回答ありがとうございます。 すいません、質問内容がまとまっていなかったので整理します。 .label { font-size:95%; color:blue; } 上記クラスはspanタグに対して使う為に作成したものです。このクラスは複数のhtmlファイルから 使用される事を想定しており、またhtmlファイル内でも複数の箇所で使用されます。 これをSPANタグに適用しようとすると、普通は「<span class="label">」と書きますが、spanタグは 大量にあるためこれはなるべく避けたいのです。 なので、まずセレクタで適用範囲を("#view span"のように)指定し、その範囲に用いたいクラスを 指定するというような方法が無いのかが知りたいというのが主旨です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
質問の意図がわからないのですが・・ CSSの文法上、規則集合と宣言ブロックになります CSS2の構文と基本データ型 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#q8 ) から、 #view span { .label } はできません。 .label という記述の意味をまず理解してください。これは HTML内の<div class="label"></div>という要素をさしますが、これは 属性セレクタ div[calss=~label]・・・class属性に空白で区切られた値にlabelを持つ要素の省略形です。div.label と、div .label は異なる。 あなたのしたいことが、#view一意セレクタ（ID selectors）内のspan要素に適用したいのでしたら div#view span という子孫セレクタでよい。直接の子供だけなら div#view>span (子供セレクタ（Child selectors）)をつかう。 <div id="ABC"> <p><span>あいうえお</span><span>かきくけこ</span><span>さしすせそ</span><span>たちつてと</span></p> <div> <span>あいうえお</span><span>かきくけこ</span><span>さしすせそ</span>たちつてと</span> </div> </div> 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;} とか
補足
ご回答ありがとうございます。 すいません、質問内容がまとまっていなかったので整理します。 .label { font-size:95%; color:blue; } 上記クラスはspanタグに対して使う為に作成したものです。このクラスは複数のhtmlファイルから 使用される事を想定しており、またhtmlファイル内でも複数の箇所で使用されます。 これをSPANタグに適用しようとすると、普通は「<span class="label">」と書きますが、spanタグは 大量にあるためこれはなるべく避けたいのです。 なので、まずセレクタで適用範囲を("#view span"のように)指定し、その範囲に用いたいクラスを 指定するというような方法が無いのかが知りたいというのが主旨です。
- SAYKA
- ベストアンサー率34% (944/2776)
#view span.label,.label{} じゃ だめ？
補足
ご回答ありがとうございます。 すいません、質問内容がまとまっていなかったので整理します。 .label { font-size:95%; color:blue; } 上記クラスはspanタグに対して使う為に作成したものです。このクラスは複数のhtmlファイルから 使用される事を想定しており、またhtmlファイル内でも複数の箇所で使用されます。 これをSPANタグに適用しようとすると、普通は「<span class="label">」と書きますが、spanタグは 大量にあるためこれはなるべく避けたいのです。 なので、まずセレクタで適用範囲を("#view span"のように)指定し、その範囲に用いたいクラスを 指定するというような方法が無いのかが知りたいというのが主旨です。
補足
ご回答ありがとうございます。 また、丁寧なサンプルまでご提示頂きありがとうございます。 さて、サンプルも確認させて頂きましたが、やはり要件を満たす事が出来ないようです。 前回の補足でも書きましたがあくまでも「.labelという宣言」があり、それを 「別のセレクタでも適用したい」という話ですので、「#view spanに同じ内容を記述」という時点でアウトなんです。 ちなみに頂いたサンプルだと「.label , #view span{ color:blue;}」をcssファイルに記載した場合、 そのcssを読んだhtmlファイルで#view spanまでも適用されてしまいますのでその点でも厳しいかと思います。 今回のご回答を確認し、私のやりたい事はcssでは不可能であると判断致しました。 長々とお付き合い頂き、誠にありがとうございました。