CSSセレクタを使用してクラスを一括で適用する方法

質問

• CSSセレクタを使用してクラスを一括で適用する方法を教えてください。
• CSSセレクタを使用してクラスを一括で適用する方法を知りたいです。
• CSSセレクタを使って複数の要素に一括でクラスを適用する方法を教えてください。

回答No.5

ORUKA1951

補足を拝見しましたが、それを読む限りでは、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」を活かせないと意味が無いのです。
以上、お手数をお掛けしておりますがご回答の程宜しくお願い致します。