web-dev-qa-db-ja.com

HTMLの前の要素と次の要素にCSSルールを適用する方法

例えば：

あなたはこれを持っています：

<ul>
 <li>zero</li>
 <li>one</li>
 <li class="selected">two</li>
 <li>three</li>
 <li>more elements</li>
</ul>

CSS：

.selected:previous {
   color: red;
}

.selected:next {
   color: green;
}

それは可能ですか？

htmlcssbrowsercross-browserstylesheet
16
CRISHK Corporation

純粋なcssでは不可能です。次の要素はスタイルできますが、前の要素はスタイルできません。

しかし、あなたはCSSでトリックをすることができます。クラスselectedを与える代わりに、previous要素にクラスを与えることができます。このような：

[〜＃〜] html [〜＃〜]

<ul>
 <li>zero</li>
 <li class="previous">one</li>
 <li>two</li>
 <li>three</li>
 <li>more elements</li>
</ul>

[〜＃〜] css [〜＃〜]

.previous{
   color: green;
}
.previous + li{
   color: red;
}
.previous + li + li{
    color:yellow;
}

これをチェックしてください http://jsfiddle.net/S5kUM/2/

23
sandeep

これは兄弟セレクターと呼ばれます。

.selected + li {
   color: red;
}

フィドル ここ

ただし、前の要素には兄弟セレクターはありません。

6
Robert Smith

これはJavaScriptで行う必要があります。

JQueryを使用している場合は、次のように実行できます。

$('.selected').prev().css('color', 'red');
$('.selected').next().css('color', 'green');
2
Colin Kenney

display: flex;およびflex-direction: row-reverse;を使用して、リストを逆にすることができます。

http://codepen.io/bscherer/pen/XMgpbb

1
captainpixel