Reputation:
I have a page, https://adsler.co.uk/jobs/, but when I try to change the background colour of the adverts using a href=
, it doesn't work.
Tried:
a [href="https://adsler.co.uk/job/nicos-cleaning-service-london-6-cleaner/" ] {background-color:
white;}
a:active [href="https://adsler.co.uk/job/nicos-cleaning-service-london-6-cleaner/"] {background-
color: white;}
Nothing.
I'm using WordPress and the page is controlled by a plugin, so difficulty to edit php/html, or even to find div class controlling entries,
Upvotes: 1
Views: 501
Reputation: 576
There are CSS selector comes in the picture.
you can do that By simply apply css to your element by
a[href="https://adsler.co.uk/job/nicos-cleaning-service-london-6-cleaner/"]{
/*your css properties*/
}
Below are some references for you
Syntax: [attribute^=value]
Example: a[href^="https"]
Description: Selects every <a> element whose href
attribute value begins with "https"
Syntax: [attribute$=value]
Example: a[href$=".pdf"]
Description: Selects every <a> element whose href
attribute value ends with ".pdf"
Syntax: [attribute*=value]
Example: a[href*="someValue"]
Description: Selects every <a> element whose href
attribute value contains the substring "someValue"'
Hope this will help you
Upvotes: 1
Reputation: 11558
You need to remove the space between the a
and the [href...]
.
ul.job_listings li.job_listing a[href="https://adsler.co.uk/job/nicos-cleaning-service-london-6-cleaner/"] {
background-color: white;
}
ul.job_listings li.job_listing a:active[href="https://adsler.co.uk/job/nicos-cleaning-service-london-6-cleaner/"] {
background-color: white;
}
body {
background: black;
}
a {
display: block;
}
<ul class="job_listings">
<li class="post-7252 job_listing type-job_listing status-publish has-post-thumbnail hentry job-type-freelance" data-longitude="" data-latitude="" style="visibility: visible;">
<a href="https://adsler.co.uk/job/nicos-cleaning-service-london-6-cleaner/">
<h3>Cleaner</h3>
</a>
</li>
<li class="post-6399 job_listing type-job_listing status-publish has-post-thumbnail hentry job-type-temporary" data-longitude="" data-latitude="" style="visibility: visible;">
<a href="https://adsler.co.uk/job/nicos-cleaning-service-london-5-cleaners-needed/">
<h3>Cleaners Needed</h3>
</a>
</li>
<li class="post-6379 job_listing type-job_listing status-publish has-post-thumbnail hentry job-type-temporary" data-longitude="" data-latitude="" style="visibility: visible;">
<a href="https://adsler.co.uk/job/customer-assistant/">
<h3>Customer Assistant – Chelsea</h3>
</a>
</li>
<li class="post-6169 job_listing type-job_listing status-expired has-post-thumbnail hentry job-type-freelance" data-longitude="" data-latitude="" style="visibility: visible;">
<a href="https://adsler.co.uk/job/cleaner/">
<h3>Cleaner</h3>
</a>
</li>
</ul>
Here's a fiddle to view: https://jsfiddle.net/3ycrt1qj/
Upvotes: 1