複数のセレクタを指定した場合、スタイルはどのように適用されるでしょうか?
今回は複数セレクタの使用を通じて、cssの適用順位を理解します。
複数classセレクタ
同じタグ(要素)へ複数のclassセレクタを指定するとどうなるでしょうか?
結果は、各々のセレクタへ指定したスタイルが適用されます。
以下、test.cssに例を記載しました。
red_colorクラスは文字色を赤色へ、strongクラスは文字を大文字へ指定するclassセレクタです。
この2つのclassセレクタをタグ(要素)のclass属性に指定します。
実行結果は、文字が大文字の赤色となります。

test.css

index.html

実行結果
異なる複数のセレクタ
idセレクタとclassセレクタではどうでしょう。
以下、test.cssは同じタグ(要素)のidセレクタへstrong_idを、classセレクタには、red_colorクラスを指定しています。
結果はidセレクタで指定したスタイルとclassセレクタで指定したスタイルが適用されます。
このように、異なるセレクタでも各々のスタイルが適用されます。

test.css

index.html

実行結果
スタイル適応の順位
同じタグ(要素)に対して、複数のclassセレクタを使用して同じプロパティを指定するとどうなるでしょうか。
以下は、同じタグ(要素)のclass属性に対して、red_colorクラス、blue_colorクラスの順でclassセレクタを指定しています。
実行結果は文字が青くなります。
いわゆる、最後に指定されたスタイルが優先されます。

test.css

index.html

実行結果
まとめ
今回のポイントは以下の2点です。
・スタイルは複数のセレクタから指定が可能。
・スタイルの適用優先順位は後勝ち。

次回はスタイルの継承の基本について理解します。
次回:継承
▼ CSSに関する記事の一覧をみる
こちら