Teach with us

How does CSS Selectors work in jQuery?

The jQuery library supports nearly all of the selectors included in Cascading Style Sheet (CSS) specifications 1 through 3, as outlined on the World Wide Web Consortium's site.

Using jQuery library developers can enhance their websites without worrying about browsers and their versions as long as the browsers have JavaScript enabled.

Most of the JQuery CSS Methods do not modify the content of the jQuery object and they are used to apply CSS properties on DOM elements.

To apply any CSS property using jQuery method css( PropertyName, PropertyValue ).

Here is the syntax for the method −

selector.css( PropertyName, PropertyValue );

Here you can pass PropertyName as a JavaScript string and based on its value, PropertyValue could be string or integer.

Example

You can try to run the following code to learn how CSS Selectors work in jQuery:

Live Demo

<html>

   <head>
      <title>The jQuery Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
   
   <body>
   
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
       
   </body>
</html>
Updated on 17-Dec-2019 09:21:51

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements