*

ウェッブ制作・パソコン

Width =px

ホーム > HTML・CSS > CSS基本と応用 >
階層とCSS MENU 

階層構造(又はボックス構造の中の兄弟、子、孫)にCSSを適用する事例紹介。

事例-1・階層単位でのCSS指定

事例-1・適用後の表示

1.第1階層 p

←ABC
2.第1階層 div
←AG 

3.第2階層 p

←ABD
4.第2階層 div
←AF 

5.第3階層 p

←ABE
6.第3階層 div
←AJ 
7.第3階層 div
←AFG
8.第3階層 div
←AFG

9.第2階層 p

←ABD
10.第2階層 div
←AF 

11.第3階層 p

←ABE
12.第3階層 div
←AFG

13.第3階層 p

←ABE

14.第3階層 p

←ABE
15.第3階層 div
←AFG

16.第3階層 p

←ABE
17.第3階層 div
←AFG

階層への適用

セレクタに関係なく全ての階層に適用

A 全て太字 bold

特定セレクタの全階層適用

p:文字の後ろに☆

特定セレクタの階層単位適用

p:第1階層のみ・背景色・灰色

p:第2階層のみ・背景色・淡茶

p:第3階層のみ・背景色・淡緑

複数階層への適用

div:第2階層以降・下に罫線・赤

div:第1と第3階層・背景色・黄

 

上記は階層指定の部分だけで、class名と属性値は省略。詳細は、事例-1のCSSに記述。

 

事例-1・HTML

事例-1・CSS

事例-1・2階層型リスト表示のCSS

 

事例-2・特定階層を指定しCSS適用

事例-2・適用後の表示

1.第1階層 p

←Q 
2.第1階層 div
←O 

3.第2階層 p

←NQ
4.第2階層 div
←O 

5.第3階層 p

←Q 
6.第3階層 div
←JO
7.第3階層 div
←KP
8.第3階層 div
←LO

9.第2階層 p

←N 
10.第2階層 div
←P 

11.第3階層 p

←Q 
12.第3階層 div
←J 

13.第3階層 p

←M 

14.第3階層 p

←M 
15.第3階層 div
←K 

16.第3階層 p

←M 
17.第3階層 div
←L 

事例-2は、構造と内容が事例-1と全く同じですが、class名の「samp」を「samp_2」としています。

特定の階層へ適用

div:第3階層:最初・背景色淡灰

div:第3階層:2番目・背景色・淡茶

div:第3階層:最後・背景色・黄緑

div:第3階層:div と同じ階層の p(兄弟)・後ろに赤色の*

p:第2階層:pの直下(又は隣接)の span を文字色・太字赤

div:階層単位:divの並び順が奇数・ 文字odd表示、太字と文字緑

div:階層単位:divの並び順が偶数・ 文字even表示、太字と文字紫

p:各階層:p先頭に文字色・薄い茶。9行目は第2階層の2番目なので適用されない。

 

事例-2・CSS