Apply CSS to Angular directives (custom or not) with native handle

Question

Let say I have a Angular app with directives like so:

<!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>

How do I apply CSS to a directive using the Angular directive handle ui-view or any other custom directive, without adding an HTML ID handle. SO for the "main" section, I dont want the following: <div id="main" ui-view="main" class="row">.

I have tried .ui-view#main and ui-view#main.

mstaessen · Accepted Answer · 2014-03-22 16:24:04Z

2

If I understand correctly, you want to use the angular directive ui-view as identifier in your CSS?

In your CSS file, you could potentially use

div[ui-view=main] {
    /* styles for main go here, duh! */
}

Seems to work in Chrome (http://plnkr.co/edit/r1fvheUs8S6AJHv4Dm59?p=preview)

If you want conditional styles, you should use

<div ng-class="{'className': 'angular condition'}"></div>

answered Mar 22, 2014 at 16:24

mstaessen

1,31712 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Apply CSS to Angular directives (custom or not) with native handle

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related