css隣接する兄弟コンビネータ - 選択した選択

Question

以下のコードで "title"クラスを選択するにはどうすればよいですか？ "subnav"クラスが存在する場合はどうしたらいいですか？

<ul class="flexMenu-popup"> 
<li> 

    <a href="x" class="title"> 
    </a> 

    <ul class="subnav"> 
    </ul> 

</li> 
</ul> 

Answer 1

私は、これはCSSで可能であるわからないんだけど、それはjQueryを使って非常に簡単です：

var $ul = $('a.title', $('ul.flexMenu-popup > li > ul.subnav').parent()); 

if ($ul.length) { 
    alert('yes'); 
} 
else { 
    alert('no'); 
} 

Answer 2

隣接セレクタ（〜と+）を使用すると、要素に続く兄弟を選択することのみが可能です。つまり、ulに続いてaを選択することができ、その逆もできません。

以下

参照スニペット：

ul { 
 
    border: 1px solid black; 
 
    list-style-type: none; 
 
} 
 
.flexMenu-popup li > ul ~ a { 
 
    color: red; 
 
}

<ul class="flexMenu-popup"> 
 
    <li> 
 
    <a href="#">a tag</a> 
 
    <ul> 
 
     ul tag 
 
     <li> 
 
     <a href="#">a tag</a> 
 
     <ul>ul tag</ul> 
 
     <a href="#">a tag</a> 
 
     </li> 
 
    </ul> 
 
    <a href="#">a tag</a> 
 
    </li> 
 
</ul>

ソリューション：

.flexMenu-popup li > a { 
    color: red; 
} 
.flexMenu-popup li > ul ~ a { 
    color: inherit; 
} 

： は、しかし、私はあなたが以下のルールの組み合わせによって行うことができます探しているものだと思います

下記のスニペットをご覧ください：

ul { 
 
    border: 1px solid black; 
 
    list-style-type: none; 
 
} 
 
.flexMenu-popup li > a { 
 
    color: red; 
 
} 
 
.flexMenu-popup li > ul ~ a { 
 
    color: inherit; 
 
}

<ul class="flexMenu-popup"> 
 
    <li> 
 
    <a href="#">a tag</a> 
 
    <ul> 
 
     ul tag 
 
     <li> 
 
     <a href="#">a tag</a> 
 
     <ul>ul tag</ul> 
 
     <a href="#">a tag</a> 
 
     </li> 
 
    </ul> 
 
    <a href="#">a tag</a> 
 
    </li> 
 
</ul>