その他

ホームページ作成関連
css 設定の覚書き

基本的なセレクタの書き方

基本的なセレクタの書き方で、時々cssを編集した時、思い出せなかったり勘違いしたものをメモしています。

  1. 特定の要素に対してのみ動作するセレクタを「.」ドットで区切り記述
    (例)img.wakusen {border:3px ridge red;}
  2. 複数のセレクタに同じ設定をする時「,」カンマで区切り複数記述する
    (例)#sample , h3 , .setumei , p {color: #ff0000;}
  3. 複数のセレクタを半角スペースで区切って、絞り込み指定
    (例)#sample .setumei p {color: #ff0000;}
  4. 奇数/偶数番目の要素だけに適用するセレクタ
    (例)ul li:nth-child(even){background: whitesmoke;}
  5. リンクで使うセレクタ
  6. 画像で使うセレクタ

特定の要素に対してのみ指定するセレクタを「.」ドットで区切り記述

特定の要素に対してのみ指定するセレクタを「.」ドットで区切り記述します。

下記の例では、img要素 と p要素 に対しセレクタを記述。

css の記述

img.wakusen {border:3px ridge red;}

p.irositei {color: #ff0000;}

この場合要素 に対し、class="・・・"で指定して使用します。

html の記述

<img src="../pasokon/todo-1.png" class="sotowaku">

<p class="irositei">・・・・</p>

のように使用します。

この例の場合は、画像に枠線を描きます。


複数のセレクタに同じ設定をする時「,」カンマで区切り複数記述する

複数のセレクタに同じ設定をする時「,」カンマで区切り複数記述する

css の記述

#sample , h3 , .setumei , p {color: #ff0000;}

のように使用します。


複数のセレクタを半角スペースで区切って、絞り込み指定

複数のセレクタを半角スペースで区切って、絞り込み指定

css の記述

#sample .setumei p {color: #ff0000;}

sample の中の .setumei の中の p に対してのみ適用されます。


奇数/偶数番目の要素だけに適用するセレクタ

奇数/偶数番目の要素だけに適用するセレクタ

偶数番目の行だけバックをグレー表示にして見やすくする時は、

css の記述

偶数番目の要素だけに適用するセレクタ

ul li:nth-child(even){ background: whitesmoke; }


奇数番目の行だけバックをグレー表示にして見やすくする時は、

css の記述

奇数番目の要素だけに適用するセレクタ

ul li:nth-child(odd){ background: whitesmoke; }


リンクで使うセレクタ

HTMLで aタグでリンクを作り、さらにCSSでデザインを変える時に使用します。

css の記述

  • a:link {・・・} 未訪問のリンクのスタイル
  • a:hover {・・・} カーソルを上にのせたときのスタイル
  • a:visited {・・・} 訪問済みリンクのスタイル
  • a:active {・・・} クリックした瞬間(ボタンを押し込んだとき)のスタイル

画像で使うセレクタ

画像の上にカーソルをのせたとき少しデザインを変えたりする時に使用します。

css の記述

img:hover {・・・}