隣接セレクタと擬似クラスの合わせ技

goto_jp 47views 更新:2014年11月25日
<div class="class1">
~
</div>
<div>
    <ul>
        <li>~</li> ←このの最初の<li>にスタイルを適用させたい
        <li>~</li>
    </ul>
</div>

HTMLに一切手を入れられないケースで、上記の箇所にスタイルを適用させるには下記のようなセレクタになります。

.class1 + div li:first-child {
  ~
}

「+」や「:first-child」といったセレクタは複合して使うことができます。

上記だけだと想定外の箇所にまで適用させてしまう可能性もあるので、もっと詳細に指定するなら下記のようになります。

.class1 + div > ul li:first-child {
  ~
}

宣言が長くなってしまうので好ましくないとも思えますが、アクロバティックな方法としてはこのような事も出来る程度に把握しておくと良いです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません