html - 次の要素に特定のクラスがある場合にのみスタイルを適用する方法は?

Question

マークアップ:

<li class="divider"></li>
<li class="active"><a href="#">Home</a>
<li class="divider"></li>
<li><a href="#">Blog</a></li>

次の兄弟である.divider場合にのみ、最初にスタイルを追加するにはどうすればよいですか?.active

私は考えて.divider + .activeいましたが、それはにスタイルを適用します.active。

.divider {
  border-left: 1px solid #d0d0d0;
}
.active {
  background: #fff;
}
// when the next sibling is .active, border-color: transparent;

score 3 · Accepted Answer

これはハックですが、これはあなたのために働くかもしれません:

div {
    color: black;
    float: right;
}

.active + .first {
    color: pink;
}

<div class='third'>third</div>
<div class='second active'>second</div>
<div class='first'>first</div>

score 1 · Accepted Answer

現在、CSS はこれを直接サポートしていませんが、jQuery は比較的簡単に作成できます。これがプロジェクトの要件であると仮定すると、うまくいく可能性があります。

jQuery では、次のように記述します。

if element.next().hasClass('active'){
    element.addClass('divider')

4 に答える 4