CSSIDセレクター

CSS IDセレクターは、一意のIDを持つHTML要素を対象としています。

IDセレクター構文：

#id-name {
    property-name: value;
}

これは、属性値と同じID名を持つHTML要素です。

<div id="id-name"></div>

CSSIDセレクター#id-name <div>に添付されています id-nameを持つ要素 属性。つまり、.id-nameに追加するスタイリングプロパティはすべて CSSスタイルシートで<div>に適用されます 。

ハッシュ記号（# ）idの名前の前に特定のCSS構文があります。 ID名をID属性としてHTML要素に追加する場合、#は使用しません。 シンボル。

それでは、実際の例で学んだことを使用してみましょう。

これがHTMLの<button> ブラウザのユーザーエージェントスタイルシートから継承されたデフォルトのスタイルを持つ要素：

<button>Button</button>

デフォルトの外観：

退屈ですか？

#my-buttonというCSSIDを作成して、デフォルトのボタンスタイルを上書きしましょう。 それにいくつかのスタイリングプロパティを与えます：

#my-button {
    font-size: 18px;
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    background-color: #F7575C;
    color: white;
}

次に、idをid属性としてボタン要素に追加します。

<button id="my-button">Button</button>

結果：

IDセレクターについて知っておくべき最も重要なことは、CSSクラスセレクターとは異なり、IDはページ上の1つの要素にしか適用できないということです。これにより、IDはクラスよりも柔軟に使用できなくなりますが、予測も容易になります。

経験則では、ヘッダー、フッター、ナビゲーションバーなど、ページに1回だけ表示される単一の要素にのみIDを使用します。