階層構造で存在するデータをCSSで適用する、又はボックス構造の中の兄弟、子、孫を指定するCSSの記述例。
事例-1・階層単位でのCSS指定
事例-1・適用後の表示
1.第1階層 p
←ABC3.第2階層 p
←ABD5.第3階層 p
←ABE9.第2階層 p
←ABD11.第3階層 p
←ABE13.第3階層 p
←ABE14.第3階層 p
←ABE16.第3階層 p
←ABE階層への適用
セレクタに関係なく全ての階層に適用
A 全て太字 bold
1 |
*{...} |
特定セレクタの全階層適用
Bp:文字の後ろに☆
1 |
p:after{...} |
特定セレクタの階層単位適用
Cp:第1階層のみ・背景色・灰色
1 |
>section p{...} |
Dp:第2階層のみ・背景色・淡茶
1 |
>section >section p{...} |
Ep:第3階層のみ・背景色・淡緑
1 |
>section >section >section p{...} |
複数階層への適用
Fdiv:第2階層以降・下に罫線・赤
1 |
>section section div{...} |
Gdiv:第1と第3階層・背景色・黄
1 2 |
>section >div, >section >section >section div{...} |
上記は階層指定の部分だけで、class名と属性値は省略。詳細は、事例-1のCSSに記述。
事例-1・HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!-- 補足説明 --> <!-- .base 適用表示のボックスのデザイン --> <!-- .samp 階層に適用するCSS --> <div class="base samp;"> <section> <p>1.第1階層 p</p><span>←ABC</span><br> <div>2.第1階層 div</div><span>←AG </span><br> <section> <p>3.第2階層 p</p><span>←ABD</span><br> <div>4.第2階層 div</div><span>←AF </span><br> <section> <p>5.第3階層 p</p><span>←ABE</span><br> <div>6.第3階層 div</div><span>←AJ </span><br> <div>7.第3階層 div</div><span>←AFG</span><br> <div>8.第3階層 div</div><span>←AFG</span><br> </section> <p>9.第2階層 p</p><span>←ABD</span><br> <div>10.第2階層 div</div><span>←AF </span><br> <section> <p>11.第3階層 p</p><span>←ABE</span><br> <div>12.第3階層 div</div><span>←AFG</span><br> <p>13.第3階層 p</p><span>←ABE</span><br> <p>14.第3階層 p</p><span>←ABE</span><br> <div>15.第3階層 div</div><span>←AFG</span><br> <p>16.第3階層 p</p><span>←ABE</span><br> <div>17.第3階層 div</div><span>←AFG</span><br> </section> </section> </section> </div> |
事例-1・CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* A */ .samp *{ font-weight:bold;} /* B */ .samp p:after{ content:" ☆";} /* C */ .samp >section > p{ background-color:silver;} /* D */ .samp >section >section > p{ background-color:wheat;} /* E */ .samp >section >section >section p{ background-color:palegreen;} /* F */ .samp >section section div{ border-bottom:1px solid red;} /* G */ .samp >section > div, .samp >section >section >section div{ background-color:yellow;} |
事例-1・2階層型リスト表示のCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.base >section >section{ margin-left:1.5em;} .base >section >section >section{ margin-left:1.5em;} .base div, .base p, .base span{ line-height:29px;} .base section p+span, .base section div+span{ float:right; letter-spacing:0.5em;} .base section p, .base section div{ display:inline-block;} .base{ border:1px solid #000; box-sizing: border-box;} .base section p, .base >section div{width:170px;} |
事例-2・特定階層を指定しCSS適用
事例-2・適用後の表示
1.第1階層 p
←Q3.第2階層 p
←NQ5.第3階層 p
←Q9.第2階層 p
←N11.第3階層 p
←Q13.第3階層 p
←M14.第3階層 p
←M16.第3階層 p
←M事例-2は、構造と内容が事例-1と全く同じですが、class名の「samp」を「samp_2」としています。
特定の階層へ適用
Jdiv:第3階層:最初・背景色淡灰
1 2 |
>section >section >section div :first-of-type{...} |
Kdiv:第3階層:2番目・背景色・淡茶
1 2 |
>section >section >section div :nth-of-type(2){...} |
Ldiv:第3階層:最後・背景色・黄緑
1 2 |
>section >section >section div :last-of-type{...} |
Mdiv:第3階層:div と同じ階層の p(兄弟)・後ろに赤色の*
1 |
>section >section >section div~p:after{...} |
Np:第2階層:pの直下(又は隣接)の span を文字色・太字赤
1 |
>section >section >p+span{...} |
Odiv:階層単位:divの並び順が奇数・ 文字odd表示、太字と文字緑
1 2 |
.samp_2 section div:nth-of-type(odd){...} .samp_2 section div:nth-of-type(odd)::after{...} |
Pdiv:階層単位:divの並び順が偶数・ 文字even表示、太字と文字紫
1 2 |
section div:nth-of-type(even){...} section div:nth-of-type(even)::after{...} |
Qp:各階層:p先頭に文字色・薄い茶。9行目は第2階層の2番目なので適用されない。
1 |
section p:first-of-type{...} |
事例-2・CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* 事例-1のHTMLの「class」を「samp-2」に変えている。 */ /* J */ .samp_2 >section >section >section div:first-of-type{ background-color:Gainsboro;} /* K */ .samp_2>section >section >section div:nth-of-type(2){ background-color:wheat;} /* L */ .samp_2 >section >section >section div:last-of-type{ background-color:palegreen;} /* M */ .samp_2 >section >section >section div~p:after{ content:" *"; color:red;} /* N */ .samp_2 >section >section >p+span{ color:red; font-weight:bold;} /* O */ .samp_2 section div:nth-of-type(odd){ color:green; font-weight:bold;} .samp_2 section div:nth-of-type(odd)::after{ content:" odd";} /* p */ .samp_2 section div:nth-of-type(even){ color:blueviolet; font-weight:bold;} .samp_2 section div:nth-of-type(even)::after{ content:" even";} /* Q */ .samp_2 section p:first-of-type{ color:saddlebrown;} |