Selector specificity

Selectors in jQuery have a spectrum of specificity, from very general selectors, to very targeted selectors. The goal is to select the correct elements, otherwise your selector is broken. The tendency for jQuery beginners is to implement very specific selectors for everything. Perhaps through trial and error, they've fixed selector bugs by adding more specificity to a given selector. However, this isn't always the best solution.

Let's look at an example that increases the size of the first letter for top-level <li> text. Here's the style we want to apply:

.big-letter::first-letter {
   font-size: 1.4em;
 }

And here's what the list item text looks like:

As you see, Comedies, Tragedies, and Histories have the big-letter style applied to them as expected. In order to do this, we need a selector that's more specific than just $('#selected-plays li'), which would apply the style to every <li>, even the sub-elements. We can use change the specificity of the jQuery...