How does CSS Selectors work in jQuery?

jQueryWeb DevelopmentFront End Technology

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>
raja
Published on 17-Dec-2017 12:22:30
Advertisements