How to use basic JQuery selectors - Part II

This is  the part II of basic JQuery selectors tutorial. You can read Part 1 get example test html file from previous post.
In this post I'm going to talk about retrieve elements with hierarchical relationships using JQuery selectors.

JQuery heirarchical selectors

• $("p, li.b").css("border","3px solid red");
  This will get the paragraph elements and List elements that has class attribute "b" and putt a red border around them


• $("ul li.a").css("border","3px solid red");
  this is called descendent selector (for more details). This will get all the list elements has class "a" with in <ul> elements.


• $("ul+p").css("border","3px solid red");
  This will get the paragraph element next to <ul> element


• $("#list1 ~ p").css("border","3px solid red");
  This is called sibling selector(for more details). This will get the every paragraph element after element with ID of "list1"

Please feel free to add a comment if you have any problem or some thing to add.