ブログ

nth-child/nth-of-typeで
最初の行の項目のみ1行で書く方法

nth-child/nth-of-typeで最初の行の項目のみ、1行で要素を反映させる方法があるので紹介します。
というか、書かないとこっちが忘れそうなので備忘録として(笑)

nth-child/nth-of-typeで最初の行の項目を普通に書くと

複数行にまたがるリストや、スマートフォンのナビゲーションなどで、最初の1行にある要素にだけCSSを反映させたいことがよくあります。
普通はこんな感じに記載するかと思います。

最近ある案件をやっていたとき、「最初の行の項目のみ要素を反映」できるかな、となんとなくおもって、「Stack Overflow」を何気なく調べてみました。

そしたらあるディスカッションの最後になにかさらりと書いてあったのですが、何気なく試したらできちゃいました。

nth-child/nth-of-typeで最初の行の項目を1行に書く

nth-child/nth-of-typeで最初の行の項目を1行に書くには、下記のように記述します。

  • 「-n」を指定することで、「0n」を指定するのと同じになります。
  • 「+2」の部分には、最初の行の項目数を入れます。

例えば、最初の行の項目数が3つあるときには「3」と指定します。

まとめ

ちょっと工夫すればもっと楽できそうですね。いちおうjQueryにも使えます。
ちなみに、allWebクリエイター塾講師の菊池さんにいつからこのテクニックがあるか聞いたら、5年前からあったそうで。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。