トップ ＞ スキル ： Web ＞ CSSセレクタの記述方法

Web

CSSセレクタの記述方法2

疑似要素・疑似クラス

疑似要素・疑似クラスとは、文書の持つツリー構造にはない内容（セレクタにマッチする対象）を閲覧者の操作に応じて動的に変化するものです。

:first-letter（最初の文字に適用）

行の先頭文字だけにスタイルを適用されます。英字新聞などによく見かけるドロップキャップ用なデザインとなります。

例）先頭文字だけに太字とフォントサイズを20pxを適用する。

HTML

        <p>文字の最初だけにスタイルがで起用されます</p>

CSS

    	<style type="text/css">
        	p:first-letter {
            	font-weight:bold;
                font-size:40px;
                }
    	</style>
疑似要素・疑似クラス1

:first-line（最初の行だけに適用）

段落の1行目だけにスタイルを適用し、2行目以降には適用しない。

例）段落の1行目に太字と文字色「緑」を適用する。

HTML

    	<p>この文章の1行目だけに太字と緑色の文字色を適用します。2行目からは適用されません。</p>

CSS

    	<style type="text/css">
        	p:first-line {
            	color:green;
                font-weight:bold;
                }
    	</style>
疑似要素・疑似クラス2

:first-child（最初の要素だけに適用）

ある要素の最初の行だけにスタイルが適用されます。

例）1つの段落があり、その先頭行だけに文字色を赤に適用する。

HTML

    	<p>1つ目の段落に文字色「赤」を適用します。</p>
        <p>2つ目の段落には適用されません。</p>

CSS

    	<style type="text/css">
        	p:first-child {
            	color:red;
                }
    	</style>
疑似要素・疑似クラス3

:nth-of-type(n)（ある要素のn番目に適用）

この疑似要素で指定された要素のn番目だけにスタイルが適用されます。

例１）3番目のp要素に太字と文字色「オレンジ」を適用する。

HTML

    	<p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>

CSS

    	<style type="text/css">
        	p:nth-of-type(3) {
            	color:orange;
                font-weight:bold;
                }
    	</style>
疑似要素・疑似クラス4

n番目という指定には、以下のような記述もできます。

:nth-of-type(n) →　n番目の要素に適用
:nth-of-type(2n+1) →　奇数番目の要素に適用
:nth-of-type(odd) →　奇数番目の要素に適用
:nth-of-type(2n) →　偶数番目の要素に適用
:nth-of-type(even) →　偶数番目の要素に適用
:nth-of-type(3n) →　3,6,9,12…番目（3の倍数）の要素に適用
:nth-of-type(3n+1) →　1,4,7,10番目（3の倍数+1）の要素に適用


例２）偶数のp要素に文字色「赤」、背景色「薄緑」を適用する。

HTML

    	<p>1番目の段落です。</p>
        <p>2番目の段落です。</p>
        <p>3番目の段落です。</p>
        <p>4番目の段落です。</p>
        <p>5番目の段落です。</p>

CSS

    	<style type="text/css">
        	p {
            	margin:0;
                padding:5px;
               }
            p:nth-of-type(even) {
            	color:red;
                background-color:#ccffcc;
               }
    	</style>
疑似要素・疑似クラス5

:nth-last-of-type(n)（後ろからn番目の要素に適用）

この疑似要素で指定された要素の後ろからn番目だけにスタイルを適用されます。また、n番目という指定は、:nth-of-type(n)と同じ指定ができます。

例）後ろから2番目のp要素だけに文字色「赤」と太字を適用する。

HTML

    	<p>後ろから5番目の段落です。</p>
        <p>後ろから4番目の段落です。</p>
        <p>後ろから3番目の段落です。</p>
        <p>後ろから2番目の段落です。</p>
        <p>後ろから1番目の段落です。</p>

CSS

    	<style type="text/css">
        	p {
            	margin:0;
                padding:5px;
               }
            p:nth-last-of-type(2) {
            	color:red;
                font-weight:bold;
               }
    	</style>
疑似要素・疑似クラス6

:hover（オンマウス時に適用）

マウスがある要素をポイントしたときに適用されます。divでも適用されますが、IEではサポートされていません。

例）div要素の範囲にマウスを移動すると背景色ピンクとマウスポインタは矢印を適用する。

HTML

    	<p>ここはdiv要素の範囲外です。</p>
        <div><p>この範囲はdiv要素で囲まれています。</p></div>
        <p>ここはdiv要素の範囲外です。</p>

CSS

    	<style type="text/css">
        	div:hover {
            	background:pink;
                cursor:default;
               }
    	</style>
疑似要素・疑似クラス7

:not（該当しない時に適用）

指定したセレクタに該当しない時にスタイルを適用されます。

例）クラス名「tt」が指定されていないp要素だけに太字を適用する。

HTML

    	<p class="tt">ここにはスタイル名「tt」が指定されています。</p>
        <p>この段落にはスタイル名は指定されていません。</p>
        <p class="tt">ここにはスタイル名「tt」が指定されています。</p>

CSS

    	<style type="text/css">
        	p:not(.tt) {
            	font-weight:bold;
               }
    	</style>
疑似要素・疑似クラス8

【CSSセレクタの記述方法2】