「プログラミング」カテゴリーアーカイブ

CSS: クラスセレクタと :nth-child 擬似セレクタの組み合わせ

CSS3で追加された :nth-child / :nth-of-type 擬似セレクタは便利です。が、こんなコードがあった時に少し迷うのではないでしょうか。

<p class="hoge">1st</p>
<p class="hoge">2nd</p>
<p>3rd</p>
<p class="hoge">4th</p>

p.hoge:nth-child(3) {
  font-size: 30px;
}

p.hoge:nth-of-type(3) {
  color: #00F;
}

nth-child のほうは、3番目の子が p.hoge に該当しないため、font-size: 30px が適用される要素はありません。
同様に、nth-of-type も3番目の p が hoge クラスを持っていないため、color: #00F は適用されることはありません。

要するに、:nth-child はまず3番目の子を見て、その要素が他のセレクタの条件を満たしていなければ一切適用しない、ということのようです（:nth-of-type についても同様）。

function と if のまわりの { } のインデント

よくあるプログラミング宗教論争に function とか if の周りの中括弧 { } のインデントをどうするか、ってものがある（気がします）。
インデントの表現法 (スペース2つ or 4つ　or タブ文字) もよくあるネタですが、この記事ではスペース2つにしておきます。

実はインデントスタイルにはそれぞれ名前があるらしく、

void Function() {
  if ( ... ) {
    // Java Style
  }
}

void Function()
{
  if ( ... ) {
    // K&R Style
  }
}

void Function()
{
  if ( ... )
  {
    // BSD Style
  }
}

と、名前がついているらしいです。Java と K&R の違いは関数の周りをインデントしているかです。

プログラミングを始めた頃は上の名前でいうところの Java Style で書いていてたのですが、Twitter で優秀なプログラマーのみなさんの話を読んでいるどうやら BSD Style (全部改行する) のが最近のよろしいスタイルらしいです。
個人的には if の周りの { } を if と同じレベルに書いてしまうとどうしても間延びしたように見えてしまって、if との関係がなんとなく見えづらくなるので好みではないのですが、どういうわけだか

int main()
{
  return 0;
}

のように書くことにはあまり抵抗がありません。なので、今は K&R Style で書くことにしています。

……という大変論理性も実りもない話なのですが、どうして { } の周りを改行するべきなのかググってもいまいちピンとくる話がなかったので、誰か教えてください。あ、PythonとかRubyを使えばこんなくだらないことを気にしなくて済むので好きです。

if ...
  # do something here
end

if ...:
  # do something here

最高ですね。