As you may already know, CSS3 introduced a set of new selectors that allow us to select elements in the document with less HTML class addition. But, the new CSS selectors rely on the browser’s capability, making them not applicable in some cases. jQuery has a set of selectors, which could be an alternative way.
There are two reasons to use jQuery selectors instead of CSS. First, jQuery has covered the compatibility for older browsers that do not support particular type of CSS selectors. Second, when building an interactive feature, we may want to select elements upon user actions such as on a mouse click or on hover.
And using jQuery selectors is the felicitous way to do the job.
Recommended Reading: How to Create a Mobile Panel with jQuery Mobile
Index selectors match elements based on its sequence. In CSS3 we have
last-child() selectors, which select the first and last elements. In jQuery, there are
Let’s say we have the following unordered list.
<ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> <li>List 4</li> <li>List 5</li> </ul>
And we want to select the third
<li> and add an HTML class. Using jQuery you can use
0, the third
<li> is actually the second at the index, giving you:
Visiblity selectors match the elements based on its visibility. So, we are able to select elements when they are visible or invisible. CSS3, at the moment does not have this kind of selectors.
In the following example, we have a
<div> element that is hidden by assigning
<div style="display:none;"> This is hidden </div>
To select the
<div>, you can do it this way using
:hidden selector, however, does not work for elements that are hidden using visibility: hidden. It works when the element
display mode is set to
none like what we have shown above, or when the element width and height is set to
To select visible elements, you can use
Using jQuery we can also select elements when they are containing the specified element. Let’s say we have two <section>. One contains a heading, while the other does not contain anything. Using the :has selector we can select the <section> that contains the heading, as follows.
CSS3, at the moment, does not have a similar selector.
Text Containing Selectors
We can also select an element that contains specified text. Let’s say we have three paragraphs and we want to select only one that contains “Hello“, for example.
:contains() we can doing so this way.
This will select the first and second paragraph. And note that the text value is case sensitive, meaning that “World” does not equal to “world”. So the text specified in the selector has to match the one at the selected element.
Lastly, jQuery allows us to select element that is in the progress of an animation. jQuery provides a set of methods to animate element, for example
.hide(). And we can use
:animated selector to select the element that is animated with those method, like so.
CSS3 is indeed more advanced than CSS2 with some introduction of new selectors. But in particular cases, you may need to use jQuery selector instead of CSS, so if this is the case for you, I hope that this post could be helpful for your reference.