css - 存在する別のクラスに応じた CSS 親セレクター

Question

私のマークアップは次のようなものです:

<li class="cont">
    <a> Click Here</a>
    <form>   </form>
</li>

フォームに ex: ng-dirty のクラスが適用されている場合、アンカー タグの背景色を変更したいと考えています。フォームは angularJs フレームワークによってこのクラスに適用されます。その場合、背景色を変更して「a」タグを強調表示したいと思います。

純粋なCss(またはsass)を使用してこれを行うにはどうすればよいですか?

ありがとう、クリス。

Answer 1

これには特定の CSS セレクターはありませんが、HTMLchange &の組み合わせで目的の効果を実現できますbox-direction:reverse;。次のように書きます。

HTML

<div class="cont">
 <form class="ng-dirty">   
     <input type="text" value="Hi"/>
 </form>
 <a> Click Here</a>
</div>

CSS

.cont{
    display:-moz-box;
    display:box;
    display:-webkit-box;
    box-direction: reverse;
    -moz-box-direction:reverse;
    -webkit-box-direction:reverse;  
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    box-orient:vertical;
}
.cont > *{
    display:block;
}
.ng-dirty + a{
    background:yellow;
}

これを確認してくださいhttp://jsfiddle.net/8YnTw/純粋なCSSを使用しています。

Answer 2

angularでこれを本当に簡単に行うことができます：

<a ng-class="{'dirty-class': myForm.$dirty}"> Click Here</a>
<form name="myForm">
</form>

http://jsfiddle.net/XYTcL/

Answer 3

次の css を使用すると動作するはずです。

.ng-dirty a {
    background-color: red;
}