CSS to change hyperlink colour on one page-CodePudding

I'm working on a WordPress site with the Twenty Twenty theme and have made some CSS changes which apply globally to make all hyperlinks red as below:

a {
  color:#ff0000;
}

I used the CSS customise side bar to globally change hyperlink colour to red but now I need to change the hyperlink colour to white for all 'list' links on just one page, leaving all other pages with red links (don't ask, it's a requirement of someone).

I have tried the CSS edits below and none seem to work for my page. The hyperlinks are WordPress list items if it helps at all. As you can probably tell I don't understand CSS enough to isolate one page to it's own styling.

.page-id-253:li{
  color:#FFFFFF;
}

.page-id-253:ul{
  color:#FFFFFF;
}

#page-id-253:link{
  color:#FFFFFF;
}

#page-id-253:a{
  color:#FFFFFF;
}

How do I select the links in list items on just one page of my WordPress site?

CodePudding user response：

You are using the wrong syntax.

And there is actually a :not selector in css where let you give style to the other element exclude the specific element.

a{
color:black;
}  

a:not(#page-id-253 a){
color:red

}

<a >Click</a>
<ul id='page-id-253'>
<li><a>Link </a></li>
</ul>

CodePudding user response：

@james Thanks a bunch, i had to make a small edit so the #page-id-253 to .page-id-253 and now the hyperlinks change to my chosen colour.

Only problem that has been introduced is my links list in the page footer have changed from black text to white also as the above is page wide. Sorry I didn't probably ask my question enough the firs time around.

Now, do I need some kind of a subquery text change that would be along the lines (obviously wrong in my case!) like...

.page-id-253 a{
color:white;not(.footer-nav-widgets-wrapper)
}

a{
color:red;
}  
#page-id-253 a{
color:black

}

<a >Click</a>
<ul id='page-id-253'>
<li><a>Link </a></li>
</ul>