CSSでのidやclassのセレクタの書き方【現役エンジニアが解説】

PROGRAM

今回は、CSSでのidやclassのセレクタの書き方について、それぞれに分け、簡単に解説していきます。

idで指定する

idでスタイルを適用するには、#id名の形式で指定します。

#id名{}と書くことによって、そのidの要素のみにスタイルを適用できます。

#hoge{
    color:red;
}

上記のコードでは、hogeというidを持つ要素の文字色のみ、赤色に変更しています。

classで指定する

classでスタイルを適用するためには、.class名の形式で指定します。

.class名{}と書くことによって、そのclassの要素のみにスタイルを適用可能です。

.hoge{
    color:green;
}

上記のコードでは、hogeというclassを持つ要素の文字色のみ、緑色に変更しています。

タグ名で指定する

タグ名でスタイルを適用する場合には、タグ名をそのまま指定します。

タグ名{}と書くことによって、そのタグの要素にスタイルを適用することができます。

span{
    color:blue;
}

上記のコードでは、spanの要素全てに対して、要素内の文字色を青色に変更しています。