擬似クラス カラムレイアウトでの留意点

要件に縛られたカラムレイアウトでの留意点

カラムレイアウトに対して、擬似クラスを用いることで感覚的にレイアウトを適用できるが、複数のデザインパターン（要件）がある場合、適用方法など留意点があるので投稿いたします。

純粋な２カラムレイアウト

２カラムの間のボーダーを適用するのに
- nth-child(odd){border-right: ...}か
- nth-child(even){border-left: ...}かどちらを選択するか

見た目だけで考えればどちらを適用しても同じです。
（box-sizing: border-boxは適用されてるとする）

ですが、「画像が一枚になって、真ん中に寄るパターンもあり得る」という要件が増えることを想定したとき、画像が一枚でもnth-child(odd){border-right}は適用されてしまいます。

このことから、２カラムの間のボーダーを適用するのには、
nth-child(even){border-left: ...}を選択する方が適切だと考えます。

連結した2カラムレイアウト

画像と説明文を１つのリンク範囲内、かつ、画像間と説明間のボーダー色が違う場合、
border-leftの適用をどの要素に持たせるのか

<ul class="list">
  <li class="item">
    <a class="link">
      <div class="gazou">画像</div>
      <div><p class="desc">画像に対する説明</p></div>
    </a>  
  </li>
    <li class="item">
    <a class="link">
      <div class="gazou">画像</div>
      <div><p class="desc">画像に対する説明</p></div>
    </a>
  </li> 
</ul>

.item:nth-child(even) .gazou {
  border-left: solid 1px white;
}
.item:nth-child(even) .desc {
  border-left: solid 1px gray;
}

挙動に関しては、擬似クラス nth-childとnth-of-typeの特徴と違いをご確認いただければ、説明は不要かと思います。

パーシャル化されたcss等を使用していて、様々なデザインパターンに適用させたい場合、自由に整数値指定（nth-child(2)など）できないため、このような手段が必要になってくるかと思います。
絶賛マサカリ募集中。