cssクラスselectorの使い方を詳しく解説_CSS/HTML

クラス セレクター
CSS では、クラス セレクターはピリオドとして表示されます。

コードをコピー コードは次のとおりです。

.center {text-align: center}

上記の例では、center クラスを持つすべての HTML 要素が中央に配置されます。
以下の HTML コードでは、h1 要素と p 要素の両方にセンター クラスがあります。これは、両方が「.center」セレクターのルールに従うことを意味します。

コードをコピー コードは次のとおりです。

この見出しは中央揃えになります。

この段落も中央揃えになります。

注: クラス名の最初の文字として数字を使用することはできません。 Mozilla や Firefox では動作しません。
id と同様に、class も派生セレクターとして使用できます。

コードをコピー コードは次のとおりです:

.fancy td {
color: #f60;
background: #666; 大きな要素内の表のセルには、灰色の背景にオレンジ色のテキストが表示されます。 (fancy という名前のより大きな要素は、table または div である可能性があります。)
要素はクラスに基づいて選択することもできます:

コードをコピー コードは次のとおりです。

td.fancy {
カラー: #f60;
背景: #666;
}

上記の例では、クラス名 fancy のテーブル セルは、灰色の背景を持つオレンジ色になります。

コードをコピー コードは次のとおりです。

マルチカテゴリセレクター

1. HTML では、クラス値に、各単語をスペースで区切った単語のリストを含めることができます。たとえば、特定の要素を重要と警告の両方としてマークしたい場合は、次のように記述できます (2 つの単語の順序は関係ありません。重要な警告と記述することもできます)。

コードをコピー コードは次のとおりです。

この段落は非常に重要な警告です。

重要なクラスを持つすべての要素は太字であり、警告クラスを持つすべての要素は斜体であり、重要と警告の両方を含むクラスを持つすべての要素も斜体であると仮定します。銀色の背景。次のように記述できます。

コードをコピー コードは次のとおりです:

. important {font -weight:大胆;}
.warning {font-weight:italic;}
. important.warning {background:silver;}

2. 2 つのクラス セレクターをリンクすることによっての場合、これらのクラス名の両方を含む要素のみを選択できます (クラス名の順序は制限されません)。
マルチクラス セレクターにクラス名リストにないクラス名が含まれている場合、一致は失敗します。次のルールを参照してください:

コードをコピー コードは次のとおりです:

。 .urgent {background:silver;}

予想どおり、このセレクターは、クラス属性に重要および緊急という単語が含まれる p 要素のみと一致します。したがって、p 要素の class 属性に「重要」と「警告」という単語のみが含まれている場合は、一致しません。ただし、次の要素とは一致します。

コードをコピー コードは次のとおりです。

この段落は非常に重要かつ緊急の警告です。