CSSセレクタの違い

CSSのドット(.)とハッシュ(#)の違いについて

CSSにおいて、ドット(.)とハッシュ(#)は、要素のスタイルを指定するセレクタとして使用されます。それぞれの意味と使い方は以下の通りです。

ドット(.)

• 例
  

  .my-class {
    color: blue;
    font-size: 16px;
  }
  

  この場合、my-classというクラスが指定されたすべての要素に、青色のフォントサイズ16pxのスタイルが適用されます。
• 使い方
  要素にクラス属性を指定し、そのクラス名にドットを付けてセレクタとして使用します。
• 意味
  クラスセレクタ

ハッシュ(#)

• 例
  

  #my-element {
    background-color: red;
    width: 200px;
    height: 100px;
  }
  

  この場合、my-elementというIDが指定された要素にのみ、赤い背景色と幅200px、高さ100pxのスタイルが適用されます。

• ハッシュ(#)
  1つの要素に固有のスタイルを適用したい場合に使用します。

注意点

• クラスセレクタは、複数の要素に同じクラス名を指定することができます。
• IDセレクタは、1つのHTMLドキュメント内で同じID名は重複できません。

CSSセレクタの違い: ドット(.)とハッシュ(#)の具体的な例

ドット(.)を使ったクラスセレクタの例

<div class="my-class">これはクラスセレクタの例です。</div>
<div class="my-class">同じクラスを指定した要素にもスタイルが適用されます。</div>

.my-class {
  color: blue;
  font-size: 16px;
}

この場合、my-classというクラスが指定されたすべての要素に、青色のフォントサイズ16pxのスタイルが適用されます。

ハッシュ(#)を使ったIDセレクタの例

<div id="my-element">これはIDセレクタの例です。</div>

#my-element {
  background-color: red;
  width: 200px;
  height: 100px;
}

この場合、my-elementというIDが指定された要素にのみ、赤い背景色と幅200px、高さ100pxのスタイルが適用されます。

属性セレクタ

要素の属性に基づいてスタイルを指定します。

• 例
  

  input[type="text"] {
    border: 1px solid #ccc;
  }
  

  この場合、type属性がtextであるすべての<input>要素に、灰色のボーダーが適用されます。

擬似クラス

• 例
  

  a:hover {
    color: red;
  }
  

  この場合、<a>要素がマウスポインタでホバーされると、赤色になります。

擬似要素

要素の特定の部分をスタイル指定します。

• 例
  

  p::first-letter {
    font-size: 24px;
  }
  

  この場合、<p>要素の最初の文字が24pxのフォントサイズになります。

子セレクタ

親要素の子要素をスタイル指定します。

• 例
  

  ul li {
    list-style-type: none;
  }
  

  この場合、<ul>要素の子要素である<li>要素のリストスタイルを削除します。

隣接セレクタ

• 例
  

  p + p {
    margin-top: 20px;
  }
  

  この場合、<p>要素の直後の<p>要素に、上マージン20pxが適用されます。

汎用セレクタ

すべての要素にスタイルを指定します。

• 例
  

  * {
    margin: 0;
    padding: 0;
  }
  

  この場合、すべての要素のマージンとパディングを0に設定します。