jQuery - Selector: Styling Sub Level Item



jQuery Selector Step By Step Tutorial - Part 3: In this post, we modify sub level item. For this job, choose a descendant of an element with an ID of favorite. Then, from that, choose that doesn't have a class of category.

Update song.js like this:

// JavaScript Document
$(document).ready(function(){
  $('#favorite > li').addClass('category');
  $('#favorite li:not(.category)').addClass('songs');
});

Next, add a class songs to css:

@charset "utf-8";
/* CSS Document */

.category{
  float:left;
  list-style:none;
  margin: 10px;
}
.songs{
 background-color:#FFFFCC;
}

You will get like this:



Series this article:
jQuery - Selectors: Understanding The $() Factory Function
jQuery - Selector: Modifying Style at List Item Levels
jQuery - Selector: Styling Sub Level Item
jQuery - Selector: XPath Selectors
jQuery - Selector: Custom Selectors
jQuery - Selector: Choose a Style at Custom Selectors
jQuery - Selector: Modify Style for Table Header
jQuery - Selector: Styling Sibling
jQuery - Selector: Styling Next Cell


Tag: jQuery, $(), factory, function, selectors, css, list item, style Category: JavaScript Post : March 21st 2008 Read: 2,137 Bookmark and Share

blog comments powered by Disqus