複数classセレクタ

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

・test.css

.red_color {
  color:red;
}
.strong {
  font-weight:bold;
}

・index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="test.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
      <div class="red_color strong">ああああ</div>
    </body>
    
</html>

異なる複数のセレクタ

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

・test.css

.red_color {
  color:red;
}
#strong_id {
  font-weight:bold;
}

・index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="test.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
      <div id="strong_id" class="red_color">ああああ</div>
    </body>
    
</html>

スタイル適応の順位

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

・test.css

.red_color {
  color:red;
}

.blue_color {
  color:blue;
}

・index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <link href="test.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
      <div class="red_color blue_color">ああああ</div>
    </body>
    
</html>

最後に

今回のポイントは以下の2点です。

ポイント ・スタイルは複数のセレクタから指定が可能。
・スタイルの適用優先順位は後勝ち。

次回はスタイルの継承の基本について理解します。

次回

継承

▼ CSSに関する記事の一覧をみる

HTML目次一覧

CSS – 目次