$(document).ready(function () {
$('#div').click(function () {
$('div').find('p').andSelf().css({ 'color': 'aqua', 'font-size': '32px' });
});
$('#paragraph').click(function () {
$('p').find('span').andSelf().css({ 'color': 'aqua', 'font-size': '32px' });
});
});
<html>
<head>
<title>adding element</title>
</head>
<body>
<div>
This is Div element.
<p>This is paragraph element inside div.
<span>This is span element inside paragraph element.</span>
</p>
</div><br />
<input type="button" id="div" value="Div - andSelf()"/>
<input type="button" id="paragraph" value="p - andSelf()"/>
<input type="button" value="Reset" onclick="location.reload()" />
</body>
</html>
div
{
color:Red;
font-size:24px;
background-color:#FDC0C0
}
p
{
color:orange;
font-size:18px;
}
span
{
color:Green;
font-size:12px;
background-color:#83E681
}