my markup is something like this:
<li class="cont">
<a> Click Here</a>
<form> </form>
</li>
I want to change the background colour of the anchor tag if the form is applied a class for ex: ng-dirty. The form gets applied this class by the angularJs framkework, when that happens I would want to highlight the 'a' tag by changing its background colour.
How can I do this using pure Css(or sass)?
Thanks, Chris.
There no specific CSS selector for this but you can achieve the desire effect with the combination HTML
change & box-direction:reverse;
. Write like this:
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;
}
Check this http://jsfiddle.net/8YnTw/ it's with pure css.
You could do this really simply with angular:
<a ng-class="{'dirty-class': myForm.$dirty}"> Click Here</a>
<form name="myForm">
</form>
Use the next css should work:
.ng-dirty a {
background-color: red;
}