Reputation: 609

selecting classes in jQuery

I am doing learn jQuery on codeschool.com and one problem troubled me. We are learning to select multiple html elements within a single jQuery entry. The html code used is below and we are supposed to select the elements of the asian class and those of the sale class.

The correct answer is $(".asian, .sale")

My question is, how did ".sale" become the class's name? If you look in the html below you will see that there is no element with a "class=sale", just an element with a class = "europe sale"." Why is the jQuery calling for ".sale" and not ".europe sale"?

<div id="tours-wrapper">
  <h1>Guided Tours</h1>
  <ul id="tours">
    <li class="america">
      <h2>New York, New York</h2>
      <span class="details">$1,899 for 7 nights</span>
      <ul class="vote"><li><a href="#">↑</a></li><li><a href="#">↓</a></li></ul>
    </li>
    <li class="europe sale">
      <h2>Paris, France</h2>
      <span class="details">$2,499 for 7 nights</span>
      <ul class="vote"><li><a href="#">↑</a></li><li><a href="#">↓</a></li></ul>
    </li>
    <li class="europe">
      <h2>Madrid, Spain</h2>
      <span class="details">$1,577 for 5 nights</span>
      <ul class="vote"><li><a href="#">↑</a></li><li><a href="#">↓</a></li></ul>
    </li>
    <li class="asia">
      <h2>Tokyo, Japan</h2>
      <span class="details">$1,999 for 5 nights</span>
      <ul class="vote"><li><a href="#">↑</a></li><li><a href="#">↓</a></li></ul>
    </li>
  </ul>

  <ul class="sorting">
    <li><a href="#">America</a></li>
    <li><a href="#">Europe</a></li>
    <li><a href="#">Asia</a></li>
  </ul>
</div>

Upvotes: 2

Answers (9)

Felix Kling

Reputation: 817198

From the HTML4 specification (emphasis mine):

class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

Hence, if an element has the attribute class="europe sale", it means that it has two classes: europe and sale.

Upvotes: 0

Navin Rauniyar

Reputation: 10555

Classes can be defined multiple times. In your stylesheet there is two classes, one is europe and another is sale, even if you want there you can specify more classes with a space. Now in your jquery you are selecting that one class sale. If you want to select sale class which contains europe class then you can select as this $('.europe.sale')

Upvotes: 0

mdup

Reputation: 8559

CSS allows for multiple class names within a single element. That means that your li element has both classes europe and sale.

MDN says :

class: This attribute is a space-separated list of the classes of the element. Classes allows CSS and Javascript to select and access specific elements via the class selectors or functions like the DOM method document.getElementsByClassName.

Upvotes: 0

meborda

Reputation: 391

Classes in html are separated by space. So if you set "europe sale", then both are considered as the element's classes.

Upvotes: 2

Den Kison

Reputation: 1084

Each words in class attribute are class. europe - is the first class that used, and sale is the second class.

Upvotes: 0

Alessandro Minoccheri

Reputation: 35973

Class europe sale is like two class europe and another sale you can select each class or europe or sale but take always the element with class europe sale

To select your eleement with two class europe sale you can do more ways for example: