This example will show you how to use :contains and :has jQuery pseudo-class selector to get web elements by web element content. And how to use :hidden and :visible selector to get web elements that are hidden or visible. It also tells you how to use child selector ( for example :first-child, :last-child, etc) to get child web elements.
1. jQuery :contains() Selector Example.
- :contains() selector return web elements which element text contains specified string.
- contains-text-selector.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Contains Text Selector</title> <script src="../../lib/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // Get all li that content contains 'Java'. $("li:contains('Java')").css({background:"blue", color:"red"}); }); </script> </head> <body> <ul> <li>Java</li> <li>C++</li> <li>Java Script</li> </ul> </body> </html>
2. jQuery :has() Selector Example.
- :has() selector return web elements which has specified child web element.
- has-web-element-selector.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Has Web Element Selector</title> <script src="../../lib/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // Set image web element border style which contained by html a tag. $("a:has('img') > img").css({border:"solid 2px red"}); }); </script> </head> <body> <a href="#">Image One<br/><img src="../../images/ic_launcher.png"/></a> <img src="../../images/ic_launcher_round.png" /> </body> </html>
3. jQuery :hidden, :visible Selector Example.
- :hidden selector return web elements that have hidden property enabled.
- :visible selector return web elements that are visible.
- hidden-visible-selector.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hidden Visible Selector</title> <script src="../../lib/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // Hide odd number p. $("p:odd").hide(); // Set odd number p ( hidden p ) text color to red. $("p:odd").css({color:'red'}); // Set visible p ( even number p ) text color to blue. $("p:visible").css({color:'blue'}); // Show hidden odd p which text color is red again. $("p:hidden").show(); }); </script> </head> <body> <p>Java Script</p> <p>Node JS</p> <p>Html</p> <p>Java</p> <p>Python</p> <p>C++</p> </body> </html>
4. jQuery :first-child, :last-child and :nth-child(step+start_idx) Selector Example.
- :first-child return the first child web element of parent selector while :last-child returns the last child element.
- :nth-child(step+start_idx) return child web elements start from start_idx with step intervals.
- child-web-element-selector.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Child Web Element Selector</title> <script src="../../lib/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function () { // Set first li style. $("li:first-child").css({background:"blue", color:"yellow"}); // Set last li style. $("li:last-child").css({background:"yellow", color:"blue"}); // Set css style for every 3 li begin from second li. $("li:nth-child(3n+2)").css({background:"green", color:"red"}); }); </script> </head> <body> <ul> <li>Java</li> <li>C++</li> <li>Java Script</li> <li>Node JS</li> <li>C++</li> <li>Dot Net</li> <li>Python</li> <li>jQuery</li> <li>Angular JS</li> <li>Java EE</li> </ul> </body> </html>