CSS

CSS解説本

CSS解説本
オススメCSS解説本
CSS基本
CSSのメリット
利用手順
HTMLとCSSの関係
スタイル設定
継承
カスケード
疑似クラスと疑似要素
マージンとパディング
数値単位
CSS実践
メニュー作成
コンテンツ作成
タイトル作成

疑似クラスと疑似要素 疑似クラスと疑似要素ってなぁに?

疑似クラスとは??

sen

要素名や、属性等で分類出来ない性質に対してスタイルを設定するためのものです。主に、以下のような疑似クラスがあります。

:link
まだ見ていないページへのリンク
:visited
すでに見たページへのリンク
:hover
マウスカーソルが要素と重なっている時(アクティブではない時)
:active
リンク部分を選択した瞬間(クリックした瞬間)
:focus
対象にフォーカスが移った時
:lang(言語コード)
()内の言語コードが設定された要素

疑似クラスを使うと、リンクが設定されている要素内容のカラーを訪問状況により変えることが出来ます。注意すべきは、リンクに関する疑似クラスを使う時に、「a:link」⇒「a:visited」⇒「a:hover」⇒「a:active」の順番で設定することです。

a : link { color : #000000 ; }
a : visited { color : #000000 ; }
a : hover { color : #000000 ; }
a : active { color : #000000 ; }

sen

疑似要素とは??

sen

要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加するためのものです。主に、以下のような疑似要素があります。

:first-line
要素の表示されている最初の1行に適応
:first-letter
要素の最初の1文字に適応

■ :first-lineについて
h2 { font-size : 12px ; }
h2:first-line { font-size : 15px ; }

<h2>CSS徹底分析!!<br>-CSSを完全マスター-</h2>

「CSS徹底分析!!」までが、15pxで表示され、「CSSを完全マスター」が12pxで表示される。

CSS徹底分析!!(15px)
-CSSを完全マスター- (12px)

■ :first-letterについて
h2 { font-size : 12px ; }
h2:first-letter { font-size : 15px ; }

<h2>CSS徹底分析!!</h2>

「C」までが、15pxで表示され、「SS徹底分析!!」が12pxで表示される。

CSS徹底分析!!(C:15px/他:12px)

※:first-lineと:first-letterを組合わせて使うことは可能ですが、「first-letter」が「first-line」より後に、適用されるので、
h2 : first-letter { color : red; }
h2 : first-line { color : blue; }
と設定しても、最初の1文字目は赤になります。

sen

▲このページのトップへ