First, write out the HTML structure of the DOM element:

<style type="text/css">
   
    .highlight{  
            background-color: gray
    }
</style>

<div>John Resign</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J.Ohn</div>
<div></div>
<p></p>
<div><p>Has p</p></div>

**A, : the contains (text) **Select the element that contains the text content as “text”

$("div:contains('John')").addClass("highlight"); //Find all divs that contain "John"

**Second, the: the empty **Selects an empty element that does not contain any children or text Review the element in chrome to see that the class style of div as empty has changed

$("div:empty").addClass("highlight");

**And three: from the selector () **Select the element that contains the element that the selector matches

$("div:has(p)").addClass("highlight"); //Find all div elements that contain p

**Fourth, the: the parent **Select an element tag that contains child elements or text

$("div:parent").addClass("highlight");  //Find all divs that contain child elements or text