たまには、ゆるめなCSSの話題でも。

対象ブラウザがIE7からになる事で、活用できるセレクタの幅はわりと広がります。
普段、IE6の対応が必須となってると、使ってないセレクタっていざ使おうとしても活用方法が分からなかったりしますよね。うん。

と言うことで、隣接セレクタ (E + F) を使った実用的？かも知れないネタでも。

---

なんちゃって、しましま

ある程度要素の数が決まってる場合、隣接セレクタを使えばIE7から対応でしましまが実現できます。

<ul class="sampleList">
    <li>あいうえお</li>
    <li>かきくけこ</li>
    <li>さしすせそ</li>
    <li>たちつてと</li>
    <li>なにぬねの</li>
</ul>

ul.sampleList {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #999;
}
ul.sampleList li {
    margin: 0;
    padding: 10px;
    background: #eee;
    border-bottom: 1px solid #999;
}
ul.sampleList li + li + li + li,
ul.sampleList li + li {
    background: #fff;
}
ul.sampleList li + li + li + li + li,
ul.sampleList li + li + li {
    background: #eee;
}

実際のサンプルは次のような感じです。
IE7とか8で見て下さい。

この場合、リストは必ず5個までになってないとダメです。
かなり力技感がアレなので、そんなに使うことは無いと思いますけど、こんな方法も有るという事で。えぇ。

フロートしたいボックスを左右に

<div class="section">
    <div class="item">
        <h3>見出し的な</h3>
        <p>BOX A 概要とか説明文とかそう言うやつ。</p>
    </div>
    <div class="item">
        <h2>見出し的な</h2>
        <p>BOX B 概要とか説明文とかそう言うやつ。</p>
    </div>
</div>

.section {
    *zoom: 1;
    padding: 15px;
    background: #fff;
    border: 1px solid #666;
}
.section:after { content: ''; display: block; clear: both; }
.section p,
.section h3 {
    margin: 0 0 10px;
}
.section .item {
    float: left;
    width: 40%;
    padding: 10px 10px 1px;
    background: #fff;
    border: 1px solid #666;
}
.section .item + .item {
    float: right;
}

実際のサンプルは次のような感じです。
IE7とか8で見て下さい。

margin指定するのが面倒な時とかに使っていけるかな。

そんな感じで、わりと頑張れる隣接セレクタでした。
もっと色んなサンプル作ろうと思ったけど、ビミョーなネタに頑張りすぎる事に虚しさを覚えそうなので、この辺で！

隣接セレクタとかIE6が切れる場合に関しては以下などが参考になると思います。

• この際だから覚えてしまいたいIE7からのCSSの小難しいセレクタやプロパティいろいろ
• 隣接セレクタ (E + F)｜セレクタ｜CSS HappyLife ZERO

今更なんでこんなネタを書いたのか分かりませんけど、何となく更新したかったんだよ！
そう、ブログは更新することが大事！・・・・(´；ω；｀)ブワッ

では、良きCSSライフを（ ・∀・）ノ