HTML5+CSS3でサイトを作ってみる。

■ 属性セレクタ/疑似要素

属性セレクタ
[属性^="XX"] 属性(class/id/href/src 等)がXXで始まるセレクタに対して
[属性$="XX"] 属性(class/id/href/src 等)がXXで終わるセレクタに対して
[属性*="XX"] 属性(class/id/href/src 等)がXXが入っているセレクタに対して
疑似要素
:after contentプロパティとセットとなっている。
content:"";の""内の要素が該当の修了タグの直前に挿しこまれる
:before contentプロパティとセットとなっている。
content:"";の""内の要素が該当の開始タグの直後に挿しこまれる
:first-child 親要素の最初の子要素に対して
:last-child 親要素の最後の子要素に対して
:only-child 親要素の中に子要素が一つだけしかないときの、その要素に対して
:nth-child(n) 親要素のn番目の子要素に対して
:nth-child(odd) 親要素の奇数番目の子要素に対して
:nth-child(even) 親要素の偶数番目の子要素に対して
:first-of-type 親要素の子要素として最初に出現する要素に対して
:last-of-type 親要素の子要素として最後に出現する要素に対して
:only-of-type 親要素の中に子要素が一種類だけしかないときの、その要素に対して
:nth-of-type(n) 親要素の子要素としてn番目に出現する要素に対して
:disabled 無効になっている要素(input/textareaなど)にスタイルを適用できる
:enabled 有効になっている要素(input/textareaなど)にスタイルを適用できる
:checked チェックされている要素にスタイルを適用できる
:target リンク先の要素に対してスタイルを適用できる
:empty 空要素に対してスタイルを適用できる
:not() ()以外の要素に対して

[属性^="XX"]

↓ class="begin..."で始まる要素にスタイル指定

りんご

りんご2

みかん

↓ href="http.."で始まる要素にスタイル指定 ばなな キウイ ↓ src="img.."で始まる要素にスタイル指定 
--[ html ]-----------------------

<div class="giji17">

  <p class="begin-apple">りんご</p>
  <p class="apple">りんご2</p>
  <p class="begin-mikan">みかん</p>

  <a href="http://www.nemuchan.com">ばなな</a>
  <a href="index.html">キウイ</a>

  <img src="img/flower.png">
  <img src="../css3/img/flower.png">

</div>

--[ CSS ]------------------------

.giji17 *{
	display:inline-block;
	margin:2px;
}
.giji17 [class^="begin"]{background:#f60;}
.giji17 [href^="http"]{background:#393;}
.giji17 [src^="img"]{background:#36c;}

[属性$="XX"]

↓ class="...end"で終わる要素にスタイル指定

りんご

りんご2

みかん

↓ href="...html"で終わる要素にスタイル指定 ばなな キウイ ↓ src="...png"で終わる要素にスタイル指定 
--[ html ]-----------------------

<div class="giji18">

  <p class="apple-end">りんご</p>
  <p class="apple">りんご2</p>
  <p class="mikan-end">みかん</p>

  <a href="http://www.nemuchan.com">ばなな</a>
  <a href="index.html">キウイ</a>

  <img src="img/flower.png">
  <img src="img/bg_cake.gif">

</div>


--[ CSS ]------------------------

.giji18 *{
	display:inline-block;
	margin:2px;
}
.giji18 [class$="end"]{background:#f60;}
.giji18 [href$="html"]{background:#393;}
.giji18 [src$="png"]{background:#36c;}

[属性*="XX"]

↓ class="all"が入っている要素にスタイル指定

りんご

りんご2

みかん

↓ href="tips"が入っている要素にスタイル指定 ばなな キウイ もも ↓ src="img"が入っている要素にスタイル指定 
--[ html ]-----------------------

<div class="giji19">

  <p class="apple-all"">りんご</p>
  <p class="apple">りんご2</p>
  <p class="all"-mikan">みかん</p>

  <a href="tips01.html">ばなな</a>
  <a href="tips02.html">キウイ</a>
  <a href="index.html">もも</a>

  <img src="img/flower.png">
  <img src="../css3/img/flower.png">
</div>

--[ CSS ]------------------------

.giji19 *{
	display:inline-block;
	margin:2px;
}
.giji19 [class*="all"]{background:#f60;}
.giji19 [href*="tips"]{background:#393;}
.giji19 [src*="img"]{background:#36c;}

after

↓疑似要素無し
  • みかん
  • りんご
  • バナナ
↓疑似要素有り
  • みかん
  • りんご
  • バナナ
--[ html ]-----------------------

<ul class="giji_a">
	<li>みかん</li>
	<li>りんご</li>
	<li>バナナ</li>
</ul>

<div style="clear:both;"></div><!--回り込み解除-->

<ul class="giji_b">
	<li>みかん</li>
	<li>りんご</li>
	<li>バナナ</li>
</ul>

--[ CSS ]------------------------

/*疑似要素無し*/
.giji_a{
	border:#666 1px solid;
}
.giji_a li{
	background:#999;
	margin:5px 10px;
	float:left;
}

/*疑似要素有り*/
.giji_b{
	border:#666 1px solid;
}
.giji_b li{
	background:#999;
	margin:5px 10px;
	float:left;
}
.giji_b:after{
	content:"";
	clear:both;
	display:block;
}

before

  • みかん
  • りんご
  • バナナ
  • キュウイ
  • もも
  • ブドウ
--[ html ]-----------------------

<ul class="giji00">
	<li>みかん</li>
	<li>りんご</li>
	<li>バナナ</li>
	<li>キュウイ</li>
	<li>もも</li>
	<li>ブドウ</li>
</ul>

--[ CSS ]------------------------

.giji00 li{
	float:left;
	padding:0 0 0 3px;

}
.giji00 li:before{
	color:#c3c;
	content:"|";
	padding:0 3px 0 0;
}

contentプロパティ

使用できるのは疑似要素である「:before」,「:after」でのみ。

↓リスト用アイコン
  • みかん
  • りんご
  • バナナ
↓画像にキャプションをつける 
--[ html ]-----------------------

<small>↓リスト用アイコン</small>
<ul class="cont1">
	<li>みかん</li>
	<li>りんご</li>
	<li>バナナ</li>
</ul>

<small>↓画像にキャプションをつける</small>
<ul class="cont2">
	<li name="みかん"><img src="./img/flower.png"></li>
	<li name="りんご"><img src="./img/flower.png"></li>
	<li name="バナナ"><img src="./img/flower.png"></li>
</ul>


--[ CSS ]------------------------

/*↓リスト用アイコン*/
.cont1 li:before{
	padding:0 5px 0 0;
	content:url("../img/icn01.gif");
}

/*↓画像にキャプションをつける*/
.cont2 li{
	float:left;
	width:40px;
}
.cont2 li:after{
	width:40px;
	display:block;
	content:attr(name);
}
.cont2:after{
	content:"";
	display:block;
	clear:both;
}
content内に示される値
url("") 画像を表示したいとき、画像のURLを貼る。
attr() タグ内に指定した属性を表示させる。
open-quote,close-quote 引用符をつけるのに使います。詳細(別サイトへ) >>
no-open-quote,no-close-quote 引用符の入れ子の深さを一階層前後させます。詳細(別サイトへ) >>

first-child

  • みかん
  • りんご
  • バナナ
  • キュウイ
  • もも
  • ブドウ
--[ html ]-----------------------

<ul class="giji01">
	<li>みかん</li>
	<li>りんご</li>
	<li>バナナ</li>
	<li>キュウイ</li>
	<li>もも</li>
	<li>ブドウ</li>
</ul>

--[ CSS ]------------------------

.giji01 li{
	width:80px;
	padding:3px 0;
	border-top:#333 dashed 1px;
}
.giji01 li:first-child {
	border:none;
}

last-child

  • みかん
  • りんご
  • バナナ
  • キュウイ
  • もも
  • ブドウ
--[ html ]-----------------------

<ul class="giji02">
	<li>みかん</li>
	<li>りんご</li>
	<li>バナナ</li>
	<li>キュウイ</li>
	<li>もも</li>
	<li>ブドウ</li>
</ul>


--[ CSS ]------------------------

.giji02 li{
	width:80px;
	padding:3px 0;
	border-bottom:#333 solid 1px;
}
.giji02 li:last-child {
	border-bottom:#333 solid 2px;
}

only-child

A B C

A B C

A B C

--[ html ]-----------------------

<p class="giji11">A <span>B</span> C</p>
<p class="giji11"><span>A</span> <i>B</i> <i>C</i></p>
<p class="giji11"><span>A</span> <span>B</span> C</p>

--[ CSS ]------------------------

.giji11 span:only-child{
	color:#f00;
	font-weight:bold;
}

nth-child(n)

  • みかん
  • りんご
  • バナナ
  • キュウイ
  • もも
  • ブドウ
--[ html ]-----------------------

<ul class="giji03">
	<li>みかん</li>
	<li>りんご</li>
	<li>バナナ</li>
	<li>キュウイ</li>
	<li>もも</li>
	<li>ブドウ</li>
</ul>

--[ CSS ]------------------------

.giji03 li{
	width:80px;
	padding:3px 0;
	background:#ccc;
}
.giji03 li:nth-child(3) {
	background:#333;
}

nth-child(odd)

  • みかん
  • りんご
  • バナナ
  • キュウイ
  • もも
  • ブドウ
--[ html ]-----------------------

<ul class="giji04">
	<li>みかん</li>
	<li>りんご</li>
	<li>バナナ</li>
	<li>キュウイ</li>
	<li>もも</li>
	<li>ブドウ</li>
</ul>

--[ CSS ]------------------------

.giji04 li{
	width:80px;
	padding:3px 0;
	background:#ccc;
}
.giji04 li:nth-child(odd) {
	background:#333;
}

nth-child(even)

  • みかん
  • りんご
  • バナナ
  • キュウイ
  • もも
  • ブドウ
--[ html ]-----------------------

<ul class="giji05">
	<li>みかん</li>
	<li>りんご</li>
	<li>バナナ</li>
	<li>キュウイ</li>
	<li>もも</li>
	<li>ブドウ</li>
</ul>

--[ CSS ]------------------------

.giji05 li{
	width:80px;
	padding:3px 0;
	background:#ccc;
}
.giji05 li:nth-child(even) {
	background:#333;
}

first-of-type

  • みかん
  • りんご
  • バナナ
  • キュウイ
  • もも
  • ブドウ
--[ html ]-----------------------

<ul class="giji06">
	<li>みかん</li>
	<li>りんご</li>
	<li>バナナ</li>
	<li>キュウイ</li>
	<li>もも</li>
	<li>ブドウ</li>
</ul>

--[ CSS ]------------------------

.giji06 li{
	width:80px;
	padding:3px 0;
	background:#ccc;
}
.giji06 li:first-of-type {
	background:#333;
}

last-of-type

  • みかん
  • りんご
  • バナナ
  • キュウイ
  • もも
  • ブドウ
--[ html ]-----------------------

<ul class="giji07">
	<li>みかん</li>
	<li>りんご</li>
	<li>バナナ</li>
	<li>キュウイ</li>
	<li>もも</li>
	<li>ブドウ</li>
</ul>

--[ CSS ]------------------------

.giji07 li{
	width:80px;
	padding:3px 0;
	background:#ccc;
}
.giji07 li:last-of-type {
	background:#333;
}

only-of-type

A B C

A B C

A B C

--[ html ]-----------------------

<p class="giji12">A <span>B</span> C</p>
<p class="giji12"><span>A</span> <i>B</i> <i>C</i></p>
<p class="giji12"><span>A</span> <span>B</span> C</p>


--[ CSS ]------------------------
.giji12 span:only-of-type{
	color:#f00;
	font-weight:bold;
}

nth-of-type(n)

  • みかん
  • りんご
  • バナナ
  • キュウイ
  • もも
  • ブドウ
--[ html ]-----------------------

<ul class="giji08">
	<li>みかん</li>
	<li>りんご</li>
	<li>バナナ</li>
	<li>キュウイ</li>
	<li>もも</li>
	<li>ブドウ</li>
</ul>

--[ CSS ]------------------------

.giji08 li{
	width:80px;
	padding:3px 0;
	background:#ccc;
}
.giji08 li:nth-of-type(3) {
	background:#333;
}

disabled / enabled

--[ html ]-----------------------

<input type="text" name="name" value="普通の状態です"/>

<div class="giji09">
　<input type="text" name="name" value=":enabled です" /> 
　<input type="text" name="name" value=":disabled です" disabled="disabled" />
</div>

--[ CSS ]------------------------

.giji09 input{
	margin:10px 0;
}
.giji09 input:enabled {
	background:#f9c;
}
.giji09 input:disabled{
	background:#ccc;
}

checked

--[ html ]-----------------------

<div class="giji10">
　<input type="radio" name="name"><label for="age10">チェックしてください。</label>
　<input type="radio" name="name"><label for="age10">チェックしてください。</label>
　<input type="radio" name="name"><label for="age10">チェックしてください。</label>
</div>

--[ CSS ]------------------------

.giji10 input:checked{
	outline:solid 6px #600;
}

target

A へ B へ C へ

A

B

C

--[ html ]-----------------------

<a href="#tgt1">A へ </a>
<a href="#tgt2">B へ </a>
<a href="#tgt3">C へ </a>

<div class="giji15">    
  <p id="tgt1">A</p>
  <p id="tgt2">B</p>
  <p id="tgt3">C</p>
</div>

--[ CSS ]------------------------

.giji15 :target {
	background-color:#666;
}

empty

A

C

--[ html ]-----------------------

<div class="giji16">    
  <p>A</p>
  <p></p>
  <p>C</p>
</div>

--[ CSS ]------------------------

.giji16 p:empty{
	color:#ccc;
}

.giji16 p:empty:before{
	content:"空要素です";
}

root

りんご

みかん

ばなな

--[ html ]-----------------------

<div class="giji16">    
  <p>A</p>
  <p></p>
  <p>C</p>
</div>

--[ CSS ]------------------------

.giji16 p:empty{
	color:#ccc;
}

.giji16 p:empty:before{
	content:"空要素です";
}

not

  • りんご
  • みかん
  • ばなな

  • りんご
  • みかん
  • ばなな
--[ html ]-----------------------

<ul class="giji13">
  <li>りんご</li>
  <li>みかん</li>
  <li>ばなな</li>
</ul>

<ul class="giji14">
  <li id="ringo">りんご</li>
  <li id="mikan">みかん</li>
  <li id="banana">ばなな</li>
</ul>

--[ CSS ]------------------------

.giji13 li,
.giji14 li{
	background:#666;
}
.giji13 li:not(:first-child){
	background:#ccc;
}
.giji14 li:not(#ringo){
	background:#ccc;
}
(c) 2011-2014 naoko okihara