|
General Selectors
Commonly used CSS type selectors are explained here
Tag Name
Fetch all HTML elements with same tag name (same type).
Example
JS
// get all div elements in the page
$.get("div");
Class Name
Fetch all HTML elements those have a particular CSS class applied. Precede the class name with a period "."
Example
JS
// get all elements with "top" css class
$.get(".top");
Id
Fetch HTML element with a particular ID. Precede the class name with a period "#"
Example
JS
// get element with "super" id
$.get("#super");
* (all)
Fetch all HTML elements
Example
JS
// get all elements
$.get("*");
// get all children elements of body
$.get("body *");
Combining Selectors (Descendant)
Selectors can be combined. Elements will be fetched based on the hierarchy of selection.
Example
JS
// get all span elements which are children of div elements
$.get("div span");
// get div elements which have parents with class name "top"
$.get(".top div");
// get all li under a parent div which is a child of span with id "super"
$.get("span#super div li");
// get all p elements with class "top"
$.get("p.top");
Separator
CSS selectors can be separated by comma "," and elements will matched for every partition and will be grouped while returning
Example
JS
// get all div and span elements
$.get("div , span");
// get all p elements with class "top" under a parent div and
// get all li elements under a parent ul
$.get("div p.top , ul li");
| |
|
|