jQuery CSS Selector

Learn jQuery CSS Selector.

jQuery CSS Selector

jQuery CSS Selector

     

jQuery CSS Selector

In this section we are learning about the jQuery CSS Selector.

The CSS Selectors is the powerful API provided by the jQuery that support CSS 1 through CSS 3. It allows the developers to find the element and set the required css value for any objects in the document tree. This can be helpful in changing the style sheet of the elements based on the user input.

The CSS Selectors are used to find the element within html page that's why they are known as "find selectors".

Syntax:

$.(selector/Syntax).methodName();

Given below the syntax of CSS Selector to select element of CSS  in different ways:

SYNTAX DESCRIPTION 
* Selects all elements
E Selects all elements with tag name E.
E F Selects all elements with tag name F that are descendants of E
E>F Selects all elements with tag name F that are direct children of E.
E+F Selects all elements with tag name F that are immediately preceded by a sibling of tag name E.
E-F Selects all elements with tag name F that are  preceded by any sibling of tag name E.
E : has(F) Selects all elements with tag name E that have at least one descendant of tag name F.
E .C Selects all the elements E that have a class name C. Removing C Removing E is identical to *.C
E#i Selects all the elements E that have an id value of i. Omitting E is identical to *#i.
E[a] Selects all the elements E  that have an attribute 'a' of any value.
E[a=v] Selects all the elements E  that have an attribute 'a' whose value is exactly 'v'.
E[a^=v] Selects all the elements E  that have an attribute 'a' whose value starts with 'v'.
E[a$=v] Selects all the elements E  that have an attribute 'a' whose value ends with 'v'.
E[a*=v] Selects all the elements E  that have an attribute 'a' whose value contains 'v'.

Given below the example of each type given above :

  • $(div) selects all <div> elements
  • $('fieldset a') selects all <a> elements within  <fieldset>elements.
  • $('li>p') selects <p> elements that are direct children of <li>element.
  • $(div-p) selects all <div> elements that are preceded by <p> elements.
  • $(p:has(b)') selects all <p> elements that contains a <b> element.
  • $(div.someClass) selects all <div> elements with a class name of 'someClass'.
  • $(' .someClass') selects all elements with class name 'someClass'.
  • $('#testButton') selects the element with id 'testButton'.
  • $('img [alt]') selects all <img> elements that posses an 'alt' attribute.
  • $('a[href$= .pdf ]') selects all <a> that posses an href attribute that ends in .pdf.
  • $('button[id*=test]') selects all buttons whose id attribute contains "test".

EXAMPLE :

The given below example uses CSS selector to count the number of element within 'body' tag . For selecting within 'body', we are using '$(document.body)' tag. For selecting all the elements of body, we used 'find(*)' method.

CssSelector.html

<!DOCTYPE html>
<html>
<head>
<style>
h3 { margin: 0; }
div,span,p {
width: 80px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
<script>var elementCount = $(document.body).find("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>
</body>
</html>

Output :

Download Source Code

Click to see online demo

Learn from experts! Attend jQuery Training classes.