Style Override

スタイル指定の詳細度と上書き

スタイルを指定する方法、指定したスタイルを上書きする方法

ブログやWEBページの作成過程で、視覚的な表現の設定を行うCSSは、見やすいドキュメントを作成する場合の必須テクニックになっています。

スタイルの指定の方法は、エレメント　や　クラス　IDといったアトリビュートを使って指定することができますが、その指定方法によって、スタイルが有効にならなかったりすることがあります。

このドキュメントでは、スタイルシートの詳細度について意識しながら、スタイルの設定と書き換えにフォーカスしてサンプルhtmlブロックを表示しています。

詳細度について スタイルを指定するときに、IDにスタイル設定する場合、class名にスタイルを設定する場合、エレメントにスタイルを設定する場合に、そのスタイルの優先順位を計算する方法があります。もっとも強いのは、!important 続いてエレメントのスタイル属性に設定が優先します。
スタイル属性に設定した場合の、詳細度は、CSS2.0では、100　CSS2.1では、1000になります。ネット上には、100で説明しているスタイルシートのリファレンスもあると思います。現在のブラウザは、インラインスタイルは、1000と考えておいたほうがよいと思います。

スタイルを確実に与えるのは大事だけれども、メンテナンス力のある指定を心がけるべきだろうと考え、意外と試したことのない詳細度を意識した設定を行うことで、オーバーライドできるスタイル設定の姿を見出せないかという実験の名残です。

<h3 class="header">要素セレクタによる指定</h3>

<p>詳細度1最も柔軟な指定</p>

<strong class="element" id="element">この文字はblue</strong><br />

<strong class="element" id="element" style="color:red">Inline Style</strong><br />

<strong class="element overwrite" id="element" style="color:red">Inline Style over write </strong>

要素セレクタによる指定

詳細度1最も柔軟な指定

この文字はblue
Inline Style
Inline Style over write
	strong{
	color:blue;
	}
	strong:after{
	/*:after　は、2.1　で　擬似セレクタは要素セレクタと同じ重み*/
	content:"詳細度1";
	}
	strong[style]:after{
	content:"詳細度1000";
	}
	/* このスタイルルールで、インラインスタイルを書き換えています　*/
	.overwrite[style]{
	color:#333 !important;
	background:#eee !important;
	}
	.overwrite[style]:after{
	content:"important";
	}

クラスセレクタによる指定

もっとも汎用的な指定

この文字はblue
Inline Style
Inline Style over write 

	.class{
	color:blue;
	}

	.class:after{
	content:"詳細度10";
	}
	/* このスタイルルールで、インラインスタイルを書き換えています　*/
	.class-overwrite[style]{
	color:green!important;
	}
	.class-overwrite[style]:after{
	content:"important";
	}

IDセレクタによる指定

ページ単位で一ヶ所しか出現しない場所への強いスタイル

この文字はblue
Inline Style
Inline Style over write 
				#id{
				color:blue;
				}

				#id:after{
				content:"詳細度100";
				}
				/* このスタイルルールで、インラインスタイルを書き換えています　*/
				.overwrite#id{
				color:green!important;
				}
				#id[style]:after{
				content:"詳細度1000";
				}

				.overwrite#id:after{
				content:"!important";
				}

IDセレクタによる指定 詳細度を低くスタイルする

IDが指定されているページで、後々のカスタマイズが楽にできるように、スタイルをセット

この文字はblue
Inline Style
Inline Style over write 
	/*
	h1[title][att=val][att~=val][att|=val]のような属性選択子(セレクタ)は10
	*/
	strong[id="idr"]{
	color:blue;
	}

	strong[id="idr"]:after{
	content:"詳細度10";
	}

	.idr[style]:after{
	content:"詳細度1000";
	}
	.overwrite[style]:after{
	content:"!important"
	}
	/* このスタイルルールで、インラインスタイルを書き換えています　*/
	.overwrite[style]{
	color:green!important;
	}

繰り返しを伴うスタイル

テーブルやリストのように、エレメントのセットで記述する場合の詳細度を低く抑えたスタイル

IEブラウザなどのnth-childに対応していないブラウザでは、背景色が表示されません。
table caption
table
table
table
table
table
table
table
table caption
tabletabletabletabletabletable
tabletabletabletabletabletable
tabletabletabletabletabletable
tabletabletabletabletabletable
tabletabletabletabletabletable
tabletabletabletabletabletable
tabletabletabletabletabletable
tabletabletabletabletabletable
 
	.table{
	width       :200px;
	margin      :10px auto;
	}
	.table thead,
	.table tfoot,
	.table-b thead,
	.table-b tfoot{
	font-weight :bold;
	text-align  :center;
	}
	.table td,
	.table-b td{
	border      :1px solid #ccc;
	}
	.table thead tr,
	.table tfoot tr,
	.table-b thead tr,
	.table-b tfoot tr{
	background  :#fee;
	}
	.table tbody tr:nth-child(even),
	.table-b col:nth-child(even){
	background  :#cde;
	}
	.table tbody tr:nth-child(odd),
	.table-b col:nth-child(odd){
	background  :#eef;
	}
上記の背景色の設定を上記の設定よりも前の行で打ち消すためには、前方に以下を配置することで実現できる。 
	.section .table *:nth-child(odd),
	.section .table *:nth-child(even),
	div .table *{
	background:none;

	}

繰り返しを伴うスタイル

リストの最初から6件だけを表示する

IEブラウザなどのnth-childに対応していないブラウザでは、背景色が表示されません。

  1. list1

  2. list2

  3. list3

  4. list4

  5. list5

  6. list6

  7. list7

  8. list8

  9. list9

  10. list10

nth-child(n+7)擬似クラスを使って表示をやめる

	.nth{
	}
	.nth li{
	display     :inline-block;
	width       :200px;
	height      :200px;
	border      :1px solid #ccc;
	margin-top  :3px;
	position    :relative;
	}
	.nth li p{
	position    :absolute;
	top         :45%;
	left        :40%;
	}
	.nth li:nth-child(n+1){
	background  :#eef;
	}
	.nth li:nth-child(n+2){
	background  :#eee;
	}
	.nth li:nth-child(n+3){
	background  :#eee;
	}
	.nth li:nth-child(n+4){
	background  :#eed;
	}
	.nth li:nth-child(n+5){
	background  :#eec;
	}
	.nth li:nth-child(n+6){
	background  :#eeb;
	}

	.nth li:nth-child(n+7){
	display     :none;
	}
上記の指定よりもより前方にあるスタイルで、上記の処理を打ち消すには、以下のようにしてもいい。
div .nth li:nth-child(n+7){ display :block; }
語