CSS3の擬似クラスを使った柔軟な要素の指定パターン - Qiita

CSS3では:first-childや:nth-child、:not()のような擬似クラスで柔軟にセレクタを指定することができます。OOCSSのようなある種のデザインパターンでも、シングルクラスでコンテンツに依存する書き方の場合でも活用することができると思います。 サンプルはCodepenにまとめています。照らし合わせながら読んでいくと理解しやすいです。 See the Pen pseudo-class-test by ManabuYasuda (@gaku) on CodePen. HTMLは以下のようにしています。.sectionという親要素に.section__itemという子要素が8つ入っています。最初の2つのサンプルには見出しが、後半のサンプルではクラス名を変えていたり、子要素の数を7つにしているものもあります。 <div class="section section1"> <h

[gologo13]

:first-of-type, :last-of-type, :nth-of-type