ドキュメント : Programming
-
【CSS】:nth-last-child(擬似クラス) - 最後からN番目の要素
CSSの擬似クラスの1つ、nth-last-childについてご紹介します。:nth-last-child:nth-last-childはN番目の要素です。基本構文:nth-last-child(n) { プロパティ名: プロパティ値;}nの部分は番目です。番目の定義形式は3種類あります。形式意味odd奇数番目even偶数番目An+BA: 整数、B: 整数、n: 0から始まる自然数サンプル以
-
【CSS】:first-of-type(擬似クラス) - 最初の特定要素
CSSの擬似クラスの1つ、first-of-typeについてご紹介します。:first-of-type:first-of-typeは兄弟要素で最初の要素です。基本構文:first-of-type { プロパティ名: プロパティ値;}サンプル以下のサンプルコードは兄弟要素の最初のh2要素にスタイルを適用します。<style>h2:first-of-type { color:
-
【CSS】:last-of-type(擬似クラス) - 最後の特定要素
CSSの擬似クラスの1つ、last-of-typeについてご紹介します。:last-of-type:last-of-typeは兄弟要素の最後の特定要素です。基本構文要素名(タグ):last-of-type { プロパティ名: プロパティ値;}サンプル以下のサンプルコードは兄弟要素の最後のh2要素にスタイルを適用します。<style>h2:last-of-type { col
-
-
【CSS】:only-of-type(擬似クラス) - 1つのみの特定要素
CSSの擬似クラスの1つ、only-of-typeについてご紹介します。:only-of-type:only-of-typeは兄弟要素がない1のみの要素です。基本構文要素名(タグ):only-of-type { プロパティ名: プロパティ値;}サンプル以下のサンプルコードは兄弟要素がないli要素にスタイルを適用します。<style>li:only-of-type { col
-
【CSS】:nth-of-type(擬似クラス) - N番目の特定要素
CSSの擬似クラスの1つ、nth-of-typeについてご紹介します。:nth-of-type:nth-of-typeは兄弟要素のN番目の特定要素です。基本構文要素名(タグ):nth-of-type(N) { プロパティ名: プロパティ値;}nの部分は番目です。番目の定義形式は3種類あります。形式意味odd奇数番目even偶数番目An+BA: 整数、B: 整数、n: 0から始まる自然数サンプ
-
-
-
【CSS】:nth-last-of-type(擬似クラス) - 最後からN番目の特定要素
CSSの擬似クラスの1つ、nth-last-of-typeについてご紹介します。:nth-last-of-type:nth-last-of-typeは兄弟要素の最後からN番目の特定要素です。基本構文要素名(タグ):nth-last-of-type(N) { プロパティ名: プロパティ値;}nの部分は番目です。番目の定義形式は3種類あります。形式意味odd奇数番目even偶数番目An+BA:
-
【CSS】::before(擬似要素) - 最初の子要素
CSSの擬似要素の1つ、beforeについてご紹介します。before擬似要素beforeは最初の子要素です。基本構文::before { プロパティ名: プロパティ値;}サンプル次のコードは擬似要素beforeでp要素の最初に子要素を定義します。<style>p::before { content: "CSSの正式名称";}</style><p>C
-
【CSS】::after(擬似要素) - 最後の子要素
CSSの擬似要素の1つ、afterについてご紹介します。after擬似要素afterは最後の子要素です。基本構文::after { content: 値; プロパティ名: プロパティ値;}contentプロパティを合わせて使用します。値に文字や画像などを指定し、コンテンツを追加することができます。サンプル次のコードは擬似要素beforeでp要素の最後に子要素を定義します。<sty
-
-
【CSS】::first-letter(擬似要素) - 最初の文字
CSSの擬似要素の1つ、first-letterについてご紹介します。first-letter擬似要素first-letterは最初の1文字です基本構文::first-letter { プロパティ名: プロパティ値;}サンプル次のコードは擬似要素first-letterでp要素の最初の1文字を大きくします。<style>p::first-letter { font-size
-
【CSS】::first-line(擬似要素) - 最初の行
CSSの擬似要素の1つ、first-lineについてご紹介します。first-line擬似要素first-lineは1行目です基本構文::first-line { プロパティ名: プロパティ値;}サンプル次のコードは擬似要素first-lineでp要素の1行目を目立たせます。<style>p::first-line { color: red; font-size: 3