今日のおさらいはありません


セレクタの種類・応用編

要素セレクタ・IDセレクタ・クラスセレクタについて、次のような書き方もある

擬似クラス 要素名の後ろにコロン（：）をつけてつなげる方式。
例）a:link（a要素：非訪問のリンクに対するセレクタ）
特定のクラス 要素名の後ろにクラス名をつなげて記載する。
これにより、要素名に絞ったクラスを指定することができる。
例）a.hoge　→　a要素に限定したクラス「hoge」（a要素以外のクラス「hoge」は対象外）
特定のID 要素名の後ろにID名をつなげて記載する。
これにより、要素名に絞ったIDを指定することができる。
例）a#hoge　→　a要素に限定したID「hoge」（a要素以外のID「hoge」は対象外）

※使用例は「サンドボックス25」を参照

回り込みの設定・解除

「float」を使用すると、文章等の回り込み設定ができる。 あわせて、回り込みを解除する「clear」についても触れる。

float - 回り込みの設定

none 回り込ませない（デフォルト値）
left 指定した要素を左に配置し、後に続く内容を右に回りこみさせる
right 画像を右に配置して、後に続く内容を左に回りこみさせる

clear - 回り込みの解除

none 解除しない
left float:leftによる回り込みを解除
right float:rightによる回り込みを解除
both どちらの回り込みも解除

擬似要素

要素内の特定箇所に適用できる「擬似要素」の種類について触れる。

:first-letter 要素の最初の文字が対象
:first-line 要素の最初の行が対象
:first-child 要素内の最初の子要素が対象
:before 要素の直前に適用
:after 要素の直後に適用

※fist-letterの使用例は「サンドボックス26」を、 first-childの使用例は「サンドボックス27」を参照
※ブラウザによってはうまく表示されない場合がある