More than 3 years have passed since last update.

cssでの優先度〜class属性、id属性〜

Posted at 2021-03-15

①class属性

クラスとは、簡単に言うと学校のクラス学級のようなもので、何年何組みたいなものです。
またこのclass名は1ページで何度でも使うことができます。
こちらは、要素に対しての指定として使われます。
例えば、ヘッダーとしての要素があるとします。その際class="header"と使われます👍

反対にid属性は１ページで1回のみ使うことができます。
こちらは
固有の名前を付ける場合に使われます👍
class属性とは違いこちらは、出席番号のようなものです。
同じクラスの同じ人が何人もいるわけにいきませんよね(・・;)　

またこれらは、cssを適用する場合にも影響があります。

cssでは、class属性よりもid属性が強い関係にあります。

では、cssでの優先度について考えてみましょう。

cssには記述方法が3つほどあります。

こちらはHTMLタグの中に書く方法です。

index.html

<p style="color:aqua">マイメロディ</p>

外部に書くのが基本なのであまり使われませんが、このような書き方も可能です。

こちらは、HTMLのヘッド内に書くことによって、このページではこのタグはすべてこのようにしてくださいと指定することができます。

index.html

<style type="text/css">
  p {color: pink;}
  </style>
  <title>Document</title>
</head>
<body>
  <p>お願い</p>
  <p>マイメロディ</p>
</body>

と書くことにより、このページでpタグが出てきた場合はすべてピンクになります😊♡

これは一番ベストなので説明する必要もありませんが、cssno
記述の場合、上から順番に読み込まれていき、一番優先されるのは下にある要素だと学習しましたね。

上記の中で一番優先的に反映されるのは、個別的に当てているHTMLタグの中に当てているcssです。

☆まとめ☆
１．class属性とid属性でcssの強制力が変わる
２．cssを書く場所により強制力が変わる

でした！！