Here is my jsfidder: Demo.
I'm trying to use the AngularJS Treeview and it's the official demo .
I want to change the css style of the root node, without impacting the children nodes. In this demo, it means to change the three root nodes' style (for example, just change their background color to red). How to do this with jQuery? Or you have a better way? Please tell me, thanks!
Best How To :
The whole structure is made of nested unordered lists (
<li> elements within
<ul> lists) and each list element has an icon element
<i> and the text in a
So if you want to select only the parent element you can use a direct descendant selector
> which will return only the first direct child. See JSFiddle here: http://jsfiddle.net/mastazi/r301gpwj/
/* style only parent */
// give border only to first-level element
$('div#tree > ul > li').css('border', '3px solid red');
// green text for first level
$('div#tree > ul > li').css('color', 'green');
//reset to black for inner levels after first
$('div#tree > ul > li ul li').css('color', 'black');