I've been attempting to use jQuery click events to toggle a specific class that changes the font-size of all elements within a single div. A descendant selector is currently being utilized to target paragraphs under this div, adjusting their font size to small. However, upon implementing the jQuery to toggleClass for the main div, only the headers change size while the targeted paragraphs retain their original size. I am seeking clarification on why this behavior occurs and any potential workarounds or best practices that I may have overlooked.
Even after trying to add the "size" class using a descendant selector in jQuery, the paragraphs still maintain a small font size despite receiving the "size" class.
The HTML
<div class="middle">
<h1>Header test</h1>
<p>Paragraph test</p>
</div>
The CSS
.middle p { font-size: small; }
.size { font-size: 5em; }
The jQuery for adding class
$('.middle').click(function () {
$(this).toggleClass('size');
});
Fiddle to illustrate problem.
https://jsfiddle.net/e0gjLhsm/
Fiddle with class toggled by decendant