*

[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

関連記事

no image

[welcart]商品複合検索ページの ①「カテゴリー : AND検索」という題文を変える ②チェックボタンと文字のスペースを空ける方法

①ウェルカートの商品複合検索ページはデフォルトで題が カテゴリー : AND検索 となっていま

記事を読む

no image

未来サーバーの無料で広告が出ないプランでwordpressをインストールしてサイトを作成する方法

未来サーバーの無料で広告が出ないプランででwordpressをインストールしてサイトを作成する方法を

記事を読む

no image

完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する方法

完全に無料でWordPress(ワードプレス)サイトを作る手順を書きます。 目次 グー

記事を読む

no image

無料のウイルス対策ソフトMicrosoft Security Essentials (マイクロソフト セキュリティ エッセンシャルズ) を使う

今まで使用していたアンチウイルスソフトの期限が切れてしまい、しばらくウイルスソフトなしで使っていたの

記事を読む

no image

[Welcart]複合検索をチェックしたもの全て表示させる

Welcartの複合検索はデフォルトではチェックしたすべてに当てはまらないとヒットしないようになって

記事を読む

no image

[Welcart] 注文完了画面をCSSでカスタマイズする

Welcartをオリジナルテンプレートで作成した場合、注文完了画面が下記図のように「送信が完了しまし

記事を読む

no image

WordPressテーマ「stinger」にはメタキーワードタグとディスクリプションタグが無い!?

SEOにつよいWordpressテーマ「stinger」には、「meta keyword」、「met

記事を読む

no image

[html/css]検索ボックスをオリジナルの画像で表示させる

デフォルトの検索ボックスといえば・・・ このように味気ないデザインですよね。 やはりサイトの

記事を読む

no image

3.無料で高機能なアクセス解析Google Analytics(アナリティクス)を設置する

完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する

記事を読む

no image

[WordPress]ウィジェットの固定ページを特定のページのみ表示させるプラグイン

ワードプレスで「ウィジェットの固定ページを特定のページのみ表示させる方法」を探していま した。で、

記事を読む

ad

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ad

PAGE TOP ↑
  プロフィール  PR:無料HP  合宿免許 大型  ファクタリング 評判  プログラマー 専門学校  オートエクゼ  中古ホイール 福井  タイヤ パッソ 新品  体育教員 大学  レカロ 中古  ブレスレット  保育士 短期大学  音楽 専門学校 福岡  サニー 日産 中古  名簿屋