兄弟セレクタのすすめとIE7での注意点

意外と活用されていない兄弟セレクタの便利な使い方と注意点をご紹介します。

// Example ul>li*3
 
// Bad
ul {
  li{
    margin-top: 10px;
    border-top: 1px solid #ccc;
    &:first-child {
      margin-top: 0;
      border-top: none;
    }
  }
}
 
// Good
ul {
  li+li {
    margin-top: 10px;
    border-top: 1px solid #ccc;
  }
}

よくあるborderの区切り線や、要素間のmarginなど、"liの次にliが来ているから"境界線をつけるという解釈をしてあげると、意味的にもコード的にも見やすくて良いですよね。

ただし、ie7ではコメントアウトも1要素として扱われてしまうので注意がが必要です。例えば、liとliの間にHTMLコメントアウトが存在した場合、li+liのセレクタは働かなくなります。