How to add CSS property for firstchild with AngularJS (jqLite)

Question

I want to add css to the first <div> element (firstChild) inside of a <div> with a specific id. How can I achieve this with AngularJS (jqLite).

My HTML looks like this:

<div id="modulare">
   <div class="ibox-content ibox-content">
     ...
   </div>
   <div class="ibox-content ibox-content">
     ...
   </div>
</div>

My AngularJS (does not work even without selection the first child):

if (angular.element('#modulare .ibox-content')){ // I need the first child here
    angular.element('.ibox-content').css("border", "none");
}

Hope you can help.

Answer 1

Try this way:

if (angular.element('#modulare.ibox-content').first()){ // I need the first child here
    angular.element('#modulare.ibox-content').first().css("border", "none");
}

Answer 2

There are Certain ways of doing this but in your way you can try:

    if (angular.element(document.getElementsByClassName('ibox-content'))){ // I need the first child here

angular.element(document.getElementsByClassName('ibox-content')).css("background-color", "red");
    }

Through css : take a class with no border

.noborder{
border:none !important;
 }

You must have ng-class in your html :

 <div class="ibox-content ibox-content" ng-class="newclass">

In your controller you can add this class whenever you dont want border:

$scope.newclass='noborder';

Important : code is not tested. created according to your needs