Specificity

Javascript: Change Parent Styling if Child Element Exists

SASS/CSS can accomplish magic. Sometimes, however, its logic doesn't go quite far enough, and you need a little help from Javascript.

In Sass/Css, the rules of specificity allow us to create styling at a high level and then override it with minimal effort when it comes to more specific cases. For example, I could go into my site theme and write out a general rule: color all links red. When an exception to that rule arises, I can target the parent element of that specific link (a div, for example) to create a new rule: color all links red, but color any link with the parent X blue.