Tutorials Point

  jQuery Tutorial
  jQuery UI
  jQuery References
  jQuery Resources
  Selected Reading

Copyright © 2014 by tutorialspoint

  Home     References     Discussion Forums     About TP  

jQuery - CSS Element Class Selector

previous next AddThis Social Bookmark Button



The element class selector selects all the elements which match with the given class of the elements.


Here is the simple syntax to use this selector:



Here is the description of all the parameters used by this selector:

  • classid: This is class ID available in the document.


Like any other jQuery selector, this selector also returns an array filled with the found elements.


  • $('.big') selects all the elements with the given class ID big.

  • $('p.small') selects all the paragraphs with the given class ID small.

  • $('.big.small') selects all the elements with a class of big and small.

Following example would select all divisions with class .big and display its content:

<title>The Selecter Example</title>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
<script type="text/javascript" language="javascript">

  $(document).ready(function() {
      var divs = $(".big");
      for( i=0; i<divs.length; i++ ){
         alert("Found Division: " + divs[i].innerHTML);


<div class="big" id="divid1">
  <p class="para1" id="pid1">This is first paragraph.</p>
  <p class="para2" id="pid2">This is second paragraph.</p>
  <p class="para3" id="pid3">This is third paragraph.</p>
<br />

<div class="big" id="divid2">
  <p>This is second division of the DOM.</p>
  <p>This is second para inside second division.</p>
<br />

<div class="medium" id="divid3">
  <p>This is a para inside third division</p>


To understand it in better way you can Try it yourself.

previous next Printer Friendly