更新日： 2018/04/19

【CSS】classを2つ指定して制御する方法。両方のクラスを持つ時だけ

classを何らかのタグに複数付与しておき、css側で「複数のclassを持つときだけ」制御する場合に役立つTipsです。
JqueryのtoggleClass()でクラス付与したりする中で必要になったので備忘録として。
超簡単＆超便利です。

タグに複数のクラスを指定する方法

おさらいですが、タグに複数のクラスを付与する方法をご紹介します。

<p class="honya honya2 honya3">ほにゃほにゃ</p>

と、このようにclass=”● ● ●”と隙間を空けながら複数のclassを指定できます。

では、css側でこの複数クラスを同時に指示するにはどうすればよいでしょうか。

例えば、「class=”A B C D E”」と5つのclassが付与されたタグに対して、AとCのclassを両方持つ場合にのみCSSスタイルを適用させる場合は、以下のように記述します。

.A.C{ margin-bottom: 10px; }

※margin-bottomは適当に変えてください。

要は、隙間なく2つのクラスを連結させて指示すれば良いのです。

非常に簡単ですね。

隙間を空けてしまうと意味が変わってくるのでご注意下さい。

※「.A .C」と、隙間があると、「.Aの中にある.C」という意味に解釈されます。