2018.08.19レシピテーブルテーブルのセルごとにスタイルを適用するクラス属性を使わずに、擬似クラス「nth-child(3)」などを使って列や行にスタイルを適用する方法を解説します。特定のセルのみにスタイルを適用する特定の列にスタイルを適用する特定のセルのみにスタイルを適用するCSSで用意されている擬似クラスを使うと、テーブルにある特定のセルだけにピンポイントでスタイルを適用することができます。表示例3行目の「BBQ大会」を赤文字に、7行目の全セルを薄い文字色にしています。td:nth-child(2)」について、「tr:nth-child(3)」は3つ目のtr要素を指しています。「td:nth-child(2)」の部分で、2つ目のtd要素を指定することで、3行目の2つ目のtd要素に対してcolorプロパティとbackground-colorプロパティを適用するセレクタとなっています。td」では、「tr:nth-child(7)」の部分で7つ目のtr要素を指し、続く「td」でtr要素の子孫要素にあたる全てのtd要素を指定しています。結果として、7行目の全てのtd要素に対してcolorプロパティを適用しています。特定の列にスタイルを適用する続いて、行ではなく列の単位でスタイルを適用していきます。列単位についても擬似クラスを使えば簡単に指定することができます。(応募受付終了)</td><td>20名</td><td>18年9月7日</td></tr></table>CSSに記述したセレクタ「td:nth-child(2)」は全ての行の中にある、2つの子孫要素であるtd要素を指定し、スタイルを適用しています。1行目の「イベント名」はth要素なのでスタイルは適用されません。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。要件を満たすコードをササッと書けて、どこでも通用するような凄いエンジニアになりたい。エンジニアをやっていると、そんな憧れや「個人の能力・スキル」重視の思考に陥ったことが一度はあるのではないでしょうか。本書はそんな個人思考から脱却し、より広い視点を持ちながら効率良い開発を進められるようなエンジニアの参考にすべき考え方が詰まっています。