liが特定のクラスを持つul背景色を変更する

Question

liに特定のクラスを持つulリストがあります。その裏の地色を変更したいのですが、ulです。

例：

<ul class="dropdown-menu"> 
    <li class="">About us</li> 
    <li class="">Why Join?</li> 
    <li class="">Constitution</li> 

</ul> 
<ul class="dropdown-menu"> 
    <li class="active">2016 Conference</li> 
    <li class="">Member Home Page</li> 
    <li class="">Bulletin Board</li> 
</ul> 

私は二ul背景色を変更したいです。

私は、次のコード試してみました

ul.dropdown-menu li.active { 
    background-color: #e9124a !important; 
} 

Answer 1

あなたは第二ul要素を選択する場合：あなたはすべてのULを選択したい場合は含まれてい誰

.dropdown-menu:nth-child(2) { 
 
    background-color: #F0D0D0; 
 
    }

<ul class="dropdown-menu"> 
 
    <li class="">About us</li> 
 
    <li class="">Why Join?</li> 
 
    <li class="">Constitution</li> 
 

 
</ul> 
 
<ul class="dropdown-menu"> 
 
    <li class="active">2016 Conference</li> 
 
    <li class="">Member Home Page</li> 
 
    <li class="">Bulletin Board</li> 
 
</ul>

をliクラスでactive、私が知っている限りそれは可能ではありませんhはCSSのみです。

Answer 2

は、CSSの要素の親を選択する方法は現在ありませんこの質問here

を参照してください。 一方、親要素を選択する必要がある場合は、JavaScriptを使用する必要があります。

Answer 3

2番目のulに新しいクラスを追加できます。例：

<ul class="dropdown-menu"> 
    <li class="">About us</li> 
    <li class="">Why Join?</li> 
    <li class="">Constitution</li> 

</ul> 
<ul class="dropdown-menu new-color"> 
    <li class="active">2016 Conference</li> 
    <li class="">Member Home Page</li> 
    <li class="">Bulletin Board</li> 
</ul> 

ul.dropdown-menu li.active { 
    background-color: #e9124a !important; 
} 

//setting the color of the second ul 
.new-color { 
    background-color: #c6ffb3 !important; 
} 

Answer 4

チェックアウトこの...

私はあなたができるあなたが

document.getElementsByClassName('active')[0].parentElement.style.background = '#e9124a';

<ul class="dropdown-menu"> 
 
    <li class="">About us</li> 
 
    <li class="">Why Join?</li> 
 
    <li class="">Constitution</li> 
 

 
</ul> 
 
<ul class="dropdown-menu"> 
 
    <li class="active">2016 Conference</li> 
 
    <li class="">Member Home Page</li> 
 
    <li class="">Bulletin Board</li> 
 
</ul>

CSSと

Answer 5

（カスケーディングスタイルシート）のJavascriptの助けを借りずにそれを行うことはできませんだと思いますHTML構造のTOPからBOTTOMまでを選択してください。他の方法ではありません。その子に基づいて要素を選択することはできません。

あなたはあなたがアクティブ `li`要素の親` ul`の背景を設定しようとしている

$("ul").has("li.active").css("background-color","#e9124a ")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dropdown-menu"> 
 
    <li class="">About us</li> 
 
    <li class="">Why Join?</li> 
 
    <li class="">Constitution</li> 
 

 
</ul> 
 
<ul class="dropdown-menu"> 
 
    <li class="active">2016 Conference</li> 
 
    <li class="">Member Home Page</li> 
 
    <li class="">Bulletin Board</li> 
 
</ul>