How do selectors work in jquery

Let's get familiar with their purpose and standard syntax. Now, there are two selectors that are mainly used to select very specific items based on their id and class attribute values. The main difference between them is the amount of elements they select.

Keep in mind that id is exclusive to a single element :. Now, class is more commonly used on a specific group of elements. Therefore, jQuery class selector is useful when, for example, you want to apply a certain style on those elements:. They are commonly referred to as jQuery attribute selectors. See the comprehensive list below, and read the descriptions. Dedicate some time to them, and you get familiar with the jQuery attribute selectors in detail:.

Another type of selectors that are important to note is those that select elements based on their hierarchical relationship. They are commonly referred to as jQuery child selectors or parent selectors.

The list below describes them and what they do:. Some jQuery selectors are keyword-based. You may recognize them easily, as they are always preceded by a colon :. In this section, we will cover a few different types of such selectors. Review the lists carefully and get to know them. Understanding these selectors will help you use jQuery much more effectively. Other times, you need every element with a class name of section that is a child element to a div with ID user-signup. There are many possible other selector combinations.

To do that, we combine the two: div. It goes from most general to most specific from left to right. That selects all div tags that ALSO have the class name of item. Adding a space changes the selector completely , as I will go over in the next section.

You can do this same pattern with class names and IDs. Again, going from left to right, it goes most general to more specific. To do this, just separate all the classes with periods. First, you can select any child of a certain element by adding a space.

Notice the space between the selectors. In the example, there are t wo. Those two are the only direct children of the other element. To select only the direct child. Nifty, huh? You can combine combined selectors. For example, you can choose all. You can choose direct descendants as well. For example, to select all div s with class of item that are direct descendants to div s with class of parent-item : div.

Similarly, :odd can be used to select :odd elements in DOM tree and :checked can be used to find check elements e. See jQuery in Action to learn more how pseudo selector works in jQuery.

Remember, individual selectors, are separated by a comma. This is mostly used together with another selector to select everything except the specified element in a group e.

This is useful when you want to apply a style to all elements of the HTML page. Btw, just be careful The all, or universal, selector is extremely slow, except when used by itself. While using W3Schools, you agree to have read and accepted our terms of use , cookie and privacy policy. Copyright by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3. Try it.