CSS セレクタのグループ化の簡単な分析

セレクタのグループ化

h2 要素と段落の両方を灰色にしたいとします。これを行う最も簡単な方法は、次のステートメントを使用することです。

h2, p {color:gray;}

ルールは、ルールの左側に h2 セレクターと p セレクターをコンマで区切って配置することで定義されます。右側のスタイル (color:gray;) は、両方のセレクターによって参照される要素に適用されます。カンマは、ルールに 2 つの異なるセレクターが含まれていることをブラウザに伝えます。このコンマがなければ、ルールの意味は完全に異なります。「子孫セレクター」を参照してください。

制限なく、必要な数のセレクターをグループ化できます。

たとえば、多くの要素をグレー表示したい場合は、次のようなルールを使用できます。

body, h2, p, table, th, td, pre, strong, em {color:gray;}

ヒント: グループ化により、作成者は特定の種類のスタイルをまとめて「圧縮」することができ、より簡潔なスタイルシートを作成できます。

次の 2 つのルールセットは同じ結果を実現しますが、どちらが書きやすいかは明らかです。

/* グループ化なし */
h1 {色:青;}
h2 {色:青;}
h3 {色:青;}
h4 {色:青;}
h5 {色:青;}
h6 {色:青;}
/* グループ化 */
h1、h2、h3、h4、h5、h6 {色:青;}

グループ化にはいくつかの興味深いオプションがあります。たとえば、次のルールのグループはすべて同等です。各グループは、セレクターと宣言をグループ化する異なる方法を示しています。

/* グループ 1 */
h1 {色:シルバー; 背景:白;}
h2 {色:シルバー; 背景:グレー;}
h3 {色:白; 背景:灰色;}
h4 {色:シルバー; 背景:白;}
b {色:灰色; 背景:白;}
/* グループ 2 */
h1、h2、h4 {色:シルバー;}
h2、h3 {背景:グレー;}
h1、h4、b {背景:白;}
h3 {色:白;}
b {色:灰色;}
/* グループ 3 */
h1、h4 {色:シルバー; 背景:白;}
h2 {色:シルバー;}
h3 {色:白;}
h2、h3 {背景:グレー;}
b {色:灰色; 背景:白;}

ワイルドカードセレクター

CSS2 では、アスタリスク (*) として表示されるユニバーサルセレクターという新しいシンプルなセレクターが導入されました。このセレクターは、ワイルドカードと同じように、任意の要素に一致します。

たとえば、次のルールはドキュメント内のすべての要素を赤にします。

* {色:赤;}
<html>
<ヘッド>
<スタイル タイプ="text/css">
* {色:赤;}
</スタイル>
</head>
<本文>
<h1>これは見出し 1 です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>
<h4>これは見出し4です</h4>
<p>これは<b>通常の</b>テキストの段落です。 </p>
</本文>
</html>

この宣言は、ドキュメント内のすべての要素をリストするグループ化セレクターと同等です。ワイルドカードセレクターを使用すると、1 回のキー操作 (アスタリスクのみ) で、ドキュメント内のすべての要素の色属性値として赤を指定できます。

宣言のグループ化

セレクターと宣言の両方をグループ化できます。

すべての h1 要素に赤い背景と、高さ 28 ピクセルの Verdana フォントを使用した青いテキストを設定する場合は、次のスタイルを記述します。

h1 {フォント: 28px Verdana;}
h1 {色: 青;}
h1 {背景: 赤;}

ただし、上記のアプローチはあまり効率的ではありません。これは、特に複数のスタイルを持つ要素に対してこのようなリストを作成する必要がある場合に面倒になる可能性があります。代わりに、宣言をグループ化することができます。

h1 {font: 28px Verdana; color: white; background: black;}

これは、前の 3 行のスタイルシートとまったく同じ効果があります。

各ステートメントをグループ化するには、各ステートメントの最後にセミコロンを使用することが重要であることに注意してください。ブラウザはスタイルシート内の空白を無視します。セミコロンを含める限り、次の形式で問題なくスタイルを作成できます。

h1 {
  フォント: 28px Verdana;
  色: 青;
  背景: 赤;
  }

どうでしょうか？上記の文章の方が読みやすいでしょうか？

ただし、2 番目のセミコロンが省略されている場合、ユーザーエージェントはスタイルシートを次のように解釈します。

h1 {
  フォント: 28px Verdana;
  色: 青 背景: 赤;
  }

background は color の有効な値ではなく、color に指定できるキーワードは 1 つだけであるため、ユーザーエージェントは color 宣言全体 (background: black の部分を含む) を無視します。この方法では、h1 見出しは赤い背景なしで青色のみで表示されますが、青い h1 がまったく表示されない可能性が高くなります。代わりに、これらのヘッダーは背景色なしでデフォルトの色 (通常は黒) で表示されます。フォント: 28px Verdana 宣言はセミコロンで正しく終了するため、引き続き正常に機能します。

セレクターのグループ化と同様に、宣言のグループ化はスタイルシートを短縮して、より明確で保守しやすいものにする便利な方法です。

ヒント: ルール内の最後のステートメントの後にセミコロンを置くのも良い習慣です。ルールに別の宣言を追加する場合、別のセミコロンを挿入し忘れる心配はありません。

セレクタと宣言をグループ化して組み合わせる

セレクターのグループ化と宣言のグループ化を 1 つのルールに組み合わせて、非常に少ないステートメントで比較的複雑なスタイルを定義できます。

次のルールは、すべての見出しに複雑なスタイルを指定します。

h1、h2、h3、h4、h5、h6 {
  色:グレー;
  背景: 白;
  パディング: 10px;
  境界線: 1px 黒一色;
  フォントファミリー: Verdana;
  }
<html>
<ヘッド>
<スタイル タイプ="text/css">
h1、h2、h3、h4、h5、h6 {
  色:グレー;
  背景: 白;
  パディング: 10px;
  境界線: 1px 黒一色;
  フォントファミリー: Verdana;
  }
</スタイル>
</head>
<本文>
<h1>これは見出し 1 です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>
<h4>これは見出し4です</h4>
<h5>これは見出し5です</h5>
<h6>これは見出し6です</h6>
</本文>
</html>

セレクタと宣言をグループ化して組み合わせる

次のルールは、すべての見出しに複雑なスタイルを指定します。

h1、h2、h3、h4、h5、h6 {
  色:グレー;
  背景: 白;
  パディング: 10px;
  境界線: 1px 黒一色;
  フォントファミリー: Verdana;
  }

上記のルールは、すべての見出しのスタイルを、白の背景、10 ピクセルのパディング、1 ピクセルの実線境界線の灰色のテキスト、およびテキストフォント Verdana として定義します。

セレクタと宣言をグループ化して組み合わせる

次のルールは、すべての見出しに複雑なスタイルを指定します。

h1、h2、h3、h4、h5、h6 {
  色:グレー;
  背景: 白;
  パディング: 10px;
  境界線: 1px 黒一色;
  フォントファミリー: Verdana;
  }

要約する

上記は私が紹介した CSS セレクターのグループ化です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: JavaScript ES6 モジュールの詳細な説明

>>: ウェブデザインにおけるテキスト入力ボックスのパラメータの説明

データ型の判断における js typeof と instanceof の違いと、その開発と使用について

CSS セレクタのグループ化の簡単な分析

データ型の判断における js typeof と instanceof の違いと、その開発と使用について

MySQLのバックアップとリカバリの簡単な分析

MySQL はどのようにしてデータの整合性を確保するのでしょうか?

AngularJSループオブジェクトプロパティで動的列を実装するアイデアの詳細な説明

HTMLは実際にはいくつかの重要なタグを学ぶアプリケーションです

MySQLを水平から垂直に、垂直から水平に変換する方法

使用場所によって混乱しやすいXHTMLタグ

CSS 位置プロパティが絶対の場合のパーセンテージ値の計算

Linux スケジュールタスクの関連操作の概要

CSS3 クリックボタン円形進行ティック効果実装コード

推薦する

Vue シングルファイルコンポーネントの実装

ApacheのDjangoオンライン展開方法

mysql を解決: エラー 1045 (28000): ユーザー 'root'@'localhost' のアクセスが拒否されました (パスワードの使用: NO/YES)

Centos 7 システムの Tomcat サーバーの詳細な分析

JavaScript オブジェクト指向クラス継承ケースの説明

MySQL 操作: JSON データ型の操作

jQueryはネストされたタブ機能を実装します

クールな充電アニメーションを実現する純粋なCSS

JS のディープコピーとシャローコピーの詳細

Linux の高並列性とパフォーマンス最適化の落とし穴の紹介

HTML テーブルマークアップチュートリアル (4): 境界線の色属性 BORDERCOLOR

CSS 透明ボーダー背景クリップマジック

オブジェクトのプロパティを反復処理する際の TypeScript の問題

IEウェブページのポップアップウィンドウの共通パラメータは自分で設定できます

スクロールバーを非表示にする HTML の簡単な実装