HOME
サイトマップ
営業日カレンダー
お問い合わせ

「CSS3 :not疑似クラスを使って、エレメントの関係を同列で明確に（１）」の続きです。

テキストの装飾で、ノートの罫線風にするとき、最初の列のみ上下にborderを入れ、その他の行を下のみにborderを入れます。または、最後の列のみ上下にborderを入れ、その他の行を上のみにborderを入れます。前者の場合、first-child疑似クラスを、後者の場合、last-child疑似クラスを使用する方法があります。

サンプル（３）は、first-child疑似クラスを使って、、最後の列のみ上下にborderを入れています。

サンプル（３）

.sample03 ul li  {
	color: #222;
	padding:5px 0;
	background: #fff;
	border-color:#c78;
	border-style:dotted;
	list-style-type:none;
	border-width:0 0 2px 0;
	}
.sample03 ul li:first-child  {
	border-width:2px 0 2px 0;
	}

 

サンプル（４）は、:not疑似クラスを使い、最初の行のみに上下border用のclassを付けて、サンプル（３）と同じ結果をって作っています。ソースはやや長めになるものの、ある効果のあるもの、無いものの関係が明確になります。

サンプル（４）

.sample04 ul li  {
	color: #222;
	padding:5px 0;
	background: #fff;
	border-color:#c78;
	border-style:dotted;
	list-style-type:none;
	}
.sample04 ul li.check04  {
	border-width:2px 0 2px 0;
	}
.sample04 ul li:not(.check04)   {
	border-width:0 0 2px 0;
	}

 

戻るボタン