In my Angular application, I have directives set up as follows:
<!doctype html>
<html lang="en" ng-app="cfd">
<head>
...
</head>
<body>
<div class="container">
<!-- Header -->
<div ui-view="header" class="row"></div>
<div ui-view="main" class="row">
<!-- Sidebar/Nav -->
<div ui-view="sidebar" class="col-xs-3"></div>
<!-- Content -->
<div ui-view="content" class="col-xs-9"></div>
</div>
<!-- Footer -->
<div ui-view="footer" class="row"></div>
</div>
</body>
</html>
I am looking for a way to apply CSS styles to a directive in Angular without using an HTML ID handle. Specifically for the "main" section, I want to avoid using
<div id="main" ui-view="main" class="row">I have experimented with trying .ui-view#main and ui-view#main, but have not had success.