class selector

Description: Selects all elements with the given class.

jQuery('class')

version added: 1.0

class

String

A class to search for. An element can have multiple classes; only one of them must match.

For class selectors, jQuery uses JavaScript's native getElementsByClassName() function if the browser supports it.

Examples

Example 1

Finds the element with the class 'myClass'.

$(".myClass").css("border","3px solid red");

The output of the code above will be:

Try it yourself

Example 1 - Full source:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$(".myClass").css("border","3px solid red");
  });
  </script>
  <style>
  div,span {
    width: 150px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div class="notMe">div class="notMe"</div>
  <div class="myClass">div class="myClass"</div>
  <span class="myClass">span class="myClass"</span>
</body>
</html>

Try it yourself

Example 2

Finds the element with both classes "myClass" and "myOtherClass".

$(".myClass.myOtherClass").css("border","3px solid red");

The output of the code above will be:

Try it yourself

Example 2 - Full source:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    $(".myClass.myOtherClass").css("border","3px solid red");
  });
  </script>
  <style>
  div,span {
    width: 150px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div class="myClass">div class="myClass"</div>
  <div class="myOtherClass">div class="myOtherClass"</div>
  <div class="myClass myOtherClass">
  <div class="myClass myOtherClass"</div>
</body>
</html>

Try it yourself

Was this information helpful?

Yes No

class selector

class selector

jQuery('class')

Examples

Example 1

Example 1 - Full source:

Example 2

Example 2 - Full source:

Comments