When it comes to styling elements, the easiest way is to use classes and assign the properties needed. However,
1. I'm not a huge fan of creating classes all over the place. That's what specificity and CSS mapping are for.
2. Going through hundreds of pages to add these classes would be a time-consuming task, especially when some pages shouldn't be touched at all!
Thankfully, I have a parent class to start with :) But now my dilemma lies in targeting the second part of text inside span tags that are divided by a <br>.
Here we have the HTML structure:
<div class="locations">
<ul>
<li><strong>Address: </strong><span>47 Feed Mill Lane
<br>
Middlebury, VT 05753</span></li>
<li><strong>Contact: </strong><span>John Doe</span></li>
<li><strong>Phone: </strong><span>800-639-3191</span>/li>
<li><strong>E-mail: </strong><span> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6838b878f8aa6838b878f8ac885898b">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3e363a32371b3e363a323775383436">[email protected]</a></a></span></li>
</ul>
And here's the CSS for the targeted line. I attempted to apply specificity logic, but it ends up selecting the entire content inside the <span>. The goal is to style the portion after the <br> so I can indent it.
.locations > ul > li:first-child > span:nth-child(2) {
background-color: #34678a; /*for testing purposes only */
text-indent:25px;
}
Check out the FIDDLE for a live example.
A little visual aid never hurts ;)