<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="descendants" style="width:500px;">div (current element) <p>p (child) <span>span (grandchild)</span> </p> <p>p (child) <span>span (grandchild)</span> </p> </div> <div class="descendants-any-one" style="width:500px;">div (current element) <p class="1">p (child) <span>span (grandchild)</span> </p> <p class="2">p (child) <span>span (grandchild)</span> </p> </div>

.descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } .descendants-any-one * { display: block; border: 2px solid black; color: lightgrey; padding: 5px; margin: 15px; }

//all childrens select $(document).ready(function(){ $("div").children().css({"color": "red", "border": "2px solid red"}); }); //any one children select $(document).ready(function(){ $(".descendants-any-one").children("p.1").css({"color": "black", "border": "2px solid black"}); });