スタイルシート(CSS)の構文

スタイルシート(CSS)の構文は、以下のとおりです。

【構文】 セレクタ{プロパティ:値;}

「セレクタ」はスタイルを適用する対象、「プロパティ」は設定項目、「値」は設定値を表します。「プロパティ:値;」は複数記述できますが、セミコロン(;)を忘れると定義が無視されてしまうので注意しましょう。

まずはおもなセレクタの種類から紹介します。

おもなセレクタの種類

*
全てのタグに適用(ユニバーサルセレクタ)
タグ名
同名のタグに適用(タイプセレクタ)
#id名
同名のid属性が付いた要素に適用(IDセレクタ)
.class名
同名のclass属性が付いた要素に適用(クラスセレクタ)
要素[属性]
指定された属性をもつ要素に適用
要素[属性=”値”]
指定された属性の値が同じ要素に適用
要素:link
要素が未訪問リンクの場合適用
要素:visited
要素が訪問済リンクの場合適用
要素:hover
要素にマウスポインタがロールオーバーしている場合適用
要素:active
要素がクリック中の場合適用
要素:focus
要素がフォーカス中の場合適用
要素:nth-child(n)
子要素のうちn番目に適用
要素:first-child
子要素のうち先頭に適用
要素:last-child
子要素のうち最後に適用
要素:nth-of-type(n)
要素のうちn番目に適用
要素:nth-last-of-type(n)
要素のうち後ろからn番目に適用
要素:first-of-type
要素のうち最初のもの
要素:last-of-type
要素のうち最後のもの
要素A 要素B
要素A内の要素B(子孫セレクタ)
要素A,要素B
要素Aと要素B(セレクタのグループ化)

また、スタイルシート(CSS)ファイル内に別のスタイルシートファイルを読み込むこともできます。

【構文】 @import url(CSSファイルのパス);