CODEWITHSUNDEEP
htmlcsswordpress
user11453335
user11453335

Reputation:

How to change background-colour with href?

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

Answers (2)

Adarsh Sharma
Adarsh Sharma

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

disinfor
disinfor

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

Related Questions