CSSを始める
CSSは、パターンマッチングルールに基づいて、文書のどの要素にどのスタイルを適用するかを決定します。 これらのパターンはセレクタと呼ばれ、タグ名(たとえばpと段落タグとの一致)から文書の特定の部分に非常に複雑なパターンまでさまざまです(たとえば、p#myid> b.highlightはbタグと一致します)。 id myidを持つ段落の子であるハイライトのクラス)。
CSSセレクタは、CSSスタイルコールの一部であり、ウェブページのどの部分をスタイリングするべきかを識別します。 セレクタには、選択したHTMLのスタイル設定方法を定義する1つ以上のプロパティが含まれています。
CSSセレクタ
セレクタにはいくつかの種類があります。
- 特定の要素に一致する型セレクタ
- クラスセレクタ - 特定のクラスと一致する要素
- IDセレクタ:要素を特定のIDと照合する
- 子孫セレクタ - 特定の要素の子孫である要素にマッチする
- 特定の要素の子である子セレクタ一致要素
- ユニバーサルセレクタ - 任意の要素にマッチする
- 隣接する兄弟セレクタ - 特定の要素の直前に一致する要素
- アトリビュートセレクタ - 特定のアトリビュートまたはアトリビュート値と一致するエレメント
- 擬似クラスセレクタ - 特定の擬似クラスと一致する要素
- 擬似要素セレクタ - 特定の擬似要素プロパティを持つ要素の一致
フォーマットCSSスタイルとCSSセレクタ
CSSスタイルの形式は次のようになります。
セレクタ{styleプロパティ:style; }
同じスタイルを持つ複数のセレクタをコンマで区切ります。 これはセレクタグループと呼ばれます。 例えば:
セレクタ1 、セレクタ2 {スタイルプロパティ:スタイル; }
セレクタのグループ化は、CSSスタイルをコンパクトに保つための簡略化されたメカニズムです。
上記のグループ分けは、次のような効果があります。
セレクタ1 {スタイルプロパティ:スタイル; }
セレクタ2 {スタイルプロパティ:スタイル; }
CSSセレクタを常にテストする
すべてのブラウザがすべてのCSSセレクタをサポートするわけではありません。 したがって、できるだけ多くのオペレーティングシステム上で多くのブラウザでセレクタをテストしてください。 しかし、CSS 1セレクタまたはCSS2セレクタを使用している場合は、うまくいくはずです。