すてきな気分〜ナイスフィーリングブログ〜

[CSS] 複数クラス「and(かつ)」の書き方

ずいぶんと久しぶりな更新です。^^;

CSSで少し勉強になったことがありました。

jQueryを使うと、自動でクラスが割り当てられたりすることがよくあります。
それは全然構わないんですが、やっぱりデザインを変えたいいなーなんてこともよくある訳で。
そんな時はCSSを駆使して何とかするんですが、トリガー用のidやclass、果てはタグに直接、jsの中でデザインソースを書かれていると結構、というかかなりキツい・・・
自分で独自のclassを付与して、デザインする訳ですが、両方のクラスを活かしたい、というパターンが出ました。
要するに、.classAかつ.classBの時、このスタイル、みたいな。

.classA「or(または)」.classBならば、カンマ区切りで書く。

.classA, .classB {
  color: #000;
}

な感じですね。

これが「and(かつ)」だと

.classA.classB {
  color: #000;
}

という具合にくっつけて書く訳です。
スマホ対応も日常的になってきて、同じプロパティを書かないとか、ソースの無駄を省くには知っておいてもいいかもと思いました。

ちなみにHTMLでは

<body class="classA classB">

という風にクラスの間に半角スペースで「and(かつ)」になります。
何かとやりたいことができるようになっているんですねぇ〜

Pocket

トラックバック

このエントリーのトラックバックURL:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です