Group CSS Test.

Robert.KIMATA.info の group 系要素の CSS test page.

この文書はCSSのスタイル確認を目的としているため、文章構造を無視してテストケースのための markup が行われています

p 要素

段落要素

hr 要素

hr 要素の前後は 0.5rem


hr 要素の前後は 0.5rem

blockquote 要素

属性を持たないblockquote

cite 属性を持ち title 属性を持たない blockquote 要素

cite 属性を持たず title 属性を持つ blockquote 要素

cite 属性と title 属性を持つ blockquote 要素

値がすごく長い cite 属性と title 属性を持つ blockquote 要素

List 要素

  1. ol list 1
  2. ol list 2
  3. ol list 3
    1. ol in ol - list 1-1
    2. ol in ol - list 1-2
    3. ol in ol - list 1-3
    • ul in ol - list 2-1
    • ul in ol - list 2-2
    • ul in ol - list 2-3
  1. p in li 1

  2. p in li 2-1

    p in li 2-2

dt 1
dd 1
dt 2
dt 3
dd 3

p in dd 4-1

p in dd 4-2

div 要素

h2 要素の次の div 要素の中の p 要素

div 要素の marginpadding0 だが、div 要素の内外に分かれることで margin の打ち消しあいが発生せず段落間の隙間が開いて描画される

div 要素に挟まれた p 要素

div 要素の中の p 要素 1

div 要素の中の p 要素 2

div 要素の後ろの p 要素 1

div 要素の後ろの p 要素 2

h2 要素の属する section 要素の最後の子要素の div 要素の中の p 要素

スタイルを指定ししていない要素

特にStyleを指定していないため全称セレクタによる指定とデフォルトスタイルとの相性を確認

menu 要素

  • p 要素
  • hr 要素
  • blockquote 要素
  • figure と figcaption 要素

    figure と figcaption の sample code
    <figure>
      <figcaption>figure と figcaption の sample code</figcaption>
      <pre class="parent-of-code">...</pre>
    </figure>