How to target a specific label, and text, and turn it into a button which links to dialing screen on mobile - css

Question

So I'd like to target a specific label class, and proceeding text, turn it into a button and have it link to dialing screen on mobile.
At the moment I can't even figure out how to target the label.
Tried using
awpcp-subtitle:nth-child(2) {background-color: #d2e03a;
color: white; text-align: center; border-radius: 2px}
.awpcp-subtitle:nth-child(odd) {background-color:
#d2e03a; color: white; text-align: center; border-radius:
2px;}
which just targets 'more information' and 'contact details'. Using 'label' targets every single label on the site.
I have this html:
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<br/><label>Phone:</label> 7576XXXXXX
<br/><label>Location:</label> London, UK
The label is 'phone' and proceeding text is the phone number, so I'd like to target this please. Turning it into button which links to dialing screen on mobile is a bonus, even if I can target just the label, that would be super.
What I'm trying to do is turn that 'phone' label, together with the text, into a button. I would like this button to link to dialing pad on a mobile phone device. It's a classifieds listing site so I want users to be able to press the button which links to the dialing pad so they can phone up and enquire without having to input the information manually. At the moment I just have a label and number which the user has to copy from the site and paste into dialling pad clipboard.
I would like some css to do all this, failing that some html or how to do it with html. Failing that, just way to to target the label 'phone' and the number after it so I can give them a background colour-one background color, so it looks like a button. Once I have that button look, I can start to figure out how to make it into a link and make it link to dialing pad on phone.
Even some html code which I can just insert into my header.php which does it all. Running WordPress.
More html
div id="main" class="container" role="main">
<div class="row">
<div id="primary" class="col-md-8 mb-xs-24 sidebar-
right">
<article id="post-1189" class="post-1189 page type-page
status-publish hentry">
<header class="entry-header">
<h1 class="entry-title"><span
class="hpt_headertitle">Awpcp Show Ad</span></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<div id="classiwrapper"><ul class="awpcp-classifieds-
menu awpcp-clearfix" data-breakpoints='{"tiny": [0,400],
"small": [400,500]}' data-breakpoints-class-prefix="awpcp-
classifieds-menu">
</ul>
<div id="showawpcpadpage">
<div class="awpcp-title"><a href="https://adsler.co.uk/wp-
user-test-dashboard-2/awpcp-show-ad/13/madame-
bovary/london/uk/books/">Madame Bovary</a></div>.
<br/>
<div class="showawpcpadpage">
<div class="awpcp-ad-primary-image"><a class="awpcp-
listing-primary-image-thickbox-link thickbox thumbnail"
href="https://adsler.co.uk/wp-
content/uploads/awpcp/images/61l8teochll-a0bee4d6-
large.jpg" rel="awpcp-gallery-13"><img
class="thumbshow" src="https://adsler.co.uk/wp-
content/uploads/awpcp/thumbs/61l8teochll-a0bee4d6-
primary.jpg" alt="Thumbnail for the listing's main image"
width="200" height="200"/></a><a class="thickbox
enlarge" href="https://adsler.co.uk/wp-
content/uploads/awpcp/images/61l8teochll-a0bee4d6-
large.jpg">Click to enlarge image.</a></div>
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<br/><label>Phone:</label> 7576335122
<br/><label>Location:</label> London, UK
</div>
<div class="showawpcpadpage"><label>Price:</label>
<strong>£ 3.00</strong></div>
<div class="fixfloat"></div>
<div class="showawpcpadpage">
<div class="awpcp-subtitle">More Information</div>
This is Gustav Flaubert's most famous novel.
Cheap price.
</div>
<div class="fixfloat"></div>
<div id="displayimagethumbswrapper">
<div id="displayimagethumbs">
<ul>
</ul>
</div>
</div>
<span class="fixfloat"><div class="tw_button
awpcp_tweet_button_div"><a
href="http://twitter.com/share?
url=https%3A%2F%2Fadsler.co.uk%2Fwp-user-test-
dashboard-2%2Fawpcp-show-ad%2F13%2Fmadame-
bovary%2Flondon%2Fuk%2Fbooks%2F&text=
Madame+Bov.
ary" rel="nofollow" class="twitter-share-button"
target="_blank">Tweet This</a></div> <div
class="tw_button awpcp_tweet_button_div"><a
href="http://www.facebook.com/sharer/sharer.php?
u=https%3A%2F%2Fadsler.co.uk%2Fwp-user-test-
dashboard-2%2Fawpcp-show-ad%2F13%2Fmadame-
bovary%2Flondon%2Fuk%2Fbooks%2F" class="facebook-
share-button" title="Share on Facebook" target="_blank">.
</a></div> <a id="flag_ad_link" href="#" data-
ad="13">Flag Ad</a></span>
<a href="https://adsler.co.uk/wp-admin/admin.php?
page=awpcp-panel&action=edit&id=13"
title="Edit Madame Bovary">Edit Ad</a>
</div></div><!--close classiwrapper-->
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="edit-link"><a class="post-edit-link"
href="https://adsler.co.uk/wp-admin/post.php?
post=1189&action=edit">Edit <span class="screen-
reader-text">"<span class="hpt_headertitle">Awpcp Show
Ad</span>"</span></a></span> </footer><!-- .entry-
footer -->
</article><!-- #post-## -->
</div><!-- #primary -->
<aside id="secondary" class="widget-area col-md-4"
role="complementary">
<div id="text-3" class="widget widget_text">
<div class="textwidget"></div>
</div></aside><!-- #secondary -->
</div>
Adsler.co.uk is the site.
https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/13/madame-bovary/london/uk/books/ is an example of the page. Here you can see that 'email' link is clickable amd highlighted as button but 'phone and number isn't.
Any ideas?

Answer 1

Well you can't target plain text without an element container. If you can modify the HTML you should at the very least wrap the text in a span. However, even better would be to wrap each label/content block into a div with a class.
Since all you've shared is a small snippet, I have no way of knowing if this will work but in this example, you can get the "phone" with the nth-of-type selector.
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<br/><label>Phone:</label> 7576XXXXXX
<br/><label>Location:</label> London, UK
CSS
label:nth-of-type(1){
your styles
}