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 モジュールの詳細な説明

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

Windows システム mysql5.7.18 インストールグラフィックチュートリアル

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

Windows システム mysql5.7.18 インストールグラフィックチュートリアル

単一選択折りたたみメニュー機能を実現するCSS

知らないかもしれないmysqldumpパラメータ

マークアップ言語 - 印刷スタイルシート

英語: リンクタグはIEでhrefを自動的に補完します

MySQLの一般クエリログとスロークエリログの分析

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)

MySQL 8.0はJSONを扱えるようになりました

EclipseでTomcatを作成する原理の詳細な説明

JavaScript 定期検証パスワード強度実装方法

推薦する

MySQL ステートメントを使用して、さまざまな整数が占めるバイト数とその最大値と最小値を調べる例

Jenkins の Docker のデプロイとインストール手順

MySQL設定ファイルを変更できない問題の解決方法（Win10）

ブラウザでビデオプレーヤーを実装するための基本的な考え方とコード

docker で nginx+php+mysql を設定する方法

MySQL でよく使用される SQL 文を表示する (詳細な説明)

OCSP を有効にすると、https 証明書の検証効率が向上し、Let's Encrypt SSL 証明書へのアクセスが遅くなる問題が解決されます。

Linux で大容量メモリページを持つ Oracle データベースを最適化する方法

ウォーターフォールフローレイアウトを実装する3つの方法

Linuxのsortコマンドの複数のパラメータを理解するための1つの質問

Reactベースのコンポーネントのカプセル化の実装手順

VMware 仮想マシンに CentOS と Qt をインストールするチュートリアル図

MySQL 8.0.20 winx64 のインストールと設定方法のグラフィックチュートリアル

MySQLデュアルマシンホットスタンバイと負荷分散の実装手順の詳細説明

Docker プライベートサーバーイメージを定期的にクリーンアップする方法