nth-of-typeの検索結果1 - 2 件 / 2件

• あとで読む

  Webデザイナー初学者必見 サクッと理解！ nth-child、nth-of-typeの違い | AndHA Blog

  • 9 users
  • and-ha.com
  • テクノロジー
  • 2021/12/20

  Webデザイナー初学者必見 サクッと理解！ nth-child、nth-of-typeの違い 公開日 : 2021.12.20 コーディング はじめに今回は、CSSの擬似クラスである、nth-shildとnth-of-typeの違いを書きたいと思います。初学者の頃よくわからなくなった経験があったので、自分のためにも、また現在勉強中の方に向けてできるだけわかりやすく説明します！ぜひ最後まで読んで見てください。 HTML基本構造の理解念の為、サラッとHTML基本構造のおさらいです。 <section clasa="company"> <h1>タイトル</h1> <p>AndHA-1</p> <p>AndHA-2</p> <p>AndHA-3</p> <p>AndHA-4</p> <p>AndHA-5</p> <div> <p>AndHA-6</p> </div> </section> この場合

  
• あとで読む

  【HTML】tableの特定の列だけCSSで一括装飾する方法(nth-of-typeの使い方)

  • 9 users
  • skill.u-ff.com
  • テクノロジー
  • 2023/10/24

  table td:nth-of-type(2) { background-color: red; } 上記のようなCSSで特定の列だけ背景色を赤くできます 「td:nth-of-type(x)」の「(x)」の部分に列番号を指定します 「background-color: red; 」なので背景色が赤くなっていますが ここを 「 font-size:100px;」みたいにすれば文字が大きくなりますし 「writing-mode: vertical-rl;」みたいにすれば縦書きになります 特定の列より左側だけ: td:nth-of-type(-n+x) 1-1 1-2 1-3 1-4 1-5