jQuery :only-child Selector
It is a jQuery Selector used to select every element that is the only child of it’s parent i.e only a single child is selected.
Syntax:
$(":only-child")
Example 1: In this example, we are using only-child selector.
HTML
<!DOCTYPE html><html><head> <title>jQuery :only-child Selector</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function () { $("p:only-child").css( "background-color", "green"); }); </script></head><body> <h1> <center>Beginner</center> </h1> <div style="border:1px solid;"> <p>Beginner for Beginner</p> </div> <br> <div style="border:1px solid;"> <p>Beginner for Beginner</p> <p>jQuery:Only Child Selector</p> </div> <br></body></html> |
Output:
Example 2: In this example, we are using only-child selector.
HTML
<!DOCTYPE html><html><head> <title>jQuery :only-child Selector</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function () { $("p:only-child").css( "background-color", "green"); }); </script></head><body> <h1> <center>Beginner</center> </h1> <div style="border:1px solid;"> <p>Beginner for Beginner</p> </div> <br> <div style="border:1px solid;"> <p>Beginner for Beginner</p> </div> <br> <div style="border:1px solid;"> <p>Beginner for Beginner</p> </div> <br></body></html> |
Output:
Contact Us