[HTML/CSS]classかつclassでセレクタを指定するときの方法(2つ以上複数のclassで指定するとき)
公開日:
:
未分類
WordPrsssを使っているとbodyクラスが大変便利ですが、トップページもその他ページも「固定ページ」で用意していたため以下のようにbodyクラスが付与されていました。
トップページ
<body class=”home page”>
その他のページ
<body class=”page-id-2 page”>
そして、トップページだけレイアウトを変更し、その他のページは同一レイアウトにしたかったのでセレクタclass指定をhome かつ page で、トップページのみにする必要がありました。
このような「classかつclassでセレクタを指定する」場合のスタイルシートの書き方をここにメモしておきます。
//トップページ
.home.page {
}
//その他のページ
.page {
}
これでOKです。
つまり
[classかつclassでセレクタを指定するときの方法(2つ以上複数のclassで指定するとき)]
のまとめは、
class=”aaa” と class=”bbb” があって、
.aaa かつ .bbbで指定したいときは
スタイルシートには
.aaa.bbb {
}
と記述します。
注意するところは、.aaa と .bbb の間にスペースを入れずに記述する点です。
ad
関連記事
-
[Windows7]ファイル拡張子ごとのアイコンを簡単に変更する方法
Windows7 でファイルを拡張子ごとにアイコンを変えたいときの方法です。 たとえば、txtファ
-
1.グーグルの無料メール(gMail)を取得する
完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する
-
[WordPress]WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる
WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる方法 &n
-
[Welcart]会員のログイン状態とログアウト状態でリンク先を変える
Welcartでウィジェットのログイン・ログアウト状態によって表示を変えたり、リンク先を変えたりした
-
Adobeのソフトのアイコンが正しく表示されない時の直し方(Photoshop・Illustrator・Flash・Fireworks・Bridge・Extension Manager等)
AdobeのCS6を購入し、インストールしたのですがいくつかのソフトのアイコンが正しく表示されない現
-
[welcart]商品複合検索ページの ①「カテゴリー : AND検索」という題文を変える ②チェックボタンと文字のスペースを空ける方法
①ウェルカートの商品複合検索ページはデフォルトで題が カテゴリー : AND検索 となっていま
-
[Photoshop]透過画像のふちをきれいに書き出し保存する
フォトショップ(Photoshop)で作成した透明部分がある、見出しアイコン用の透過画像を作成しまし
-
無料のウイルス対策ソフトMicrosoft Security Essentials (マイクロソフト セキュリティ エッセンシャルズ) を使う
今まで使用していたアンチウイルスソフトの期限が切れてしまい、しばらくウイルスソフトなしで使っていたの
-
[WordPress]ウィジェットの固定ページを特定のページのみ表示させるプラグイン
ワードプレスで「ウィジェットの固定ページを特定のページのみ表示させる方法」を探していま した。で、
-
[WordPress]ContactForm7をオリジナルページで表示させる方法
大変便利なプラグインContactForm7ですが、通常の設置方法は の を投稿ページや固定