■疑似クラス(要素の状況やタイミングに対しスタイル設定) :link <a>タグ、未参照のもの :visited <a>タグ、既参照のもの :active <a>タグ、アクティブ中 :hover マウスカーソルが要素と重なっているとき :focus 対象がクリックされたとき A:link {color:red;} A:visited {color:gray;} A:active {color:yellow;} A:hover {color:green;} input:focus { clolr:blue;} |
■疑似要素(要素の特定の箇所に対してスタイルを設定) :first-letter 要素中の最初の一文字 :first-line 要素の中の最初の一行 :before 要素の直前 :after 要素の直後 <style type="text/css"> <!-- div:first-line {background-color:yellow;} h4:first-letter{font-size:x-large;background-color:lime;padding-left:20pt;} h3:before{content:"[";color:red;} h3:after{content"]";color:blue;} --> </style> <h3>浜崎あゆみ</h3> <div>文章の中味をこのように書いています。</div> <h4>independent</h4> <div>何て事ないささいな出来事にまた僕は怯えてる。それを隠そうとしては強がるクセ発揮する。君はとなりに寄り添いワケのわからぬ事を話してる。不器用にでも何とか励まそうとしてる。</div> |