How to specify all links with a certain pattern with CSS

Question

#p1 a,#p2 a,#p3 a,#p4 a,#p5 a, etc.

I have thousands of them.

How can I specify all of them with CSS

tried #p* tried id^="p"

Answer 1

Works for me.

[id^="p"] a {
  color: red;
}

[id^="z"] a {
  color: green;
  text-decoration: none;
}

[id^="z"] a:hover {
  color: blue;
  text-decoration: underline;
}

<p id="p1"><a href="">P One</a></p>
<p id="p2"><a href="">P Two</a></p>
<p id="p3"><a href="">P Three</a></p>
<p id="p4"><a href="">P Four</a></p>

<p id="z1"><a href="">Z One</a></p>
<p id="z2"><a href="">Z Two</a></p>
<p id="z3"><a href="">Z Three</a></p>
<p id="z4"><a href="">Z Four</a></p>

But I’m sure you could find a better selector than "id starts with p". Giving all the relevant links a class would seem a more robust solution.

Answer 2

You are styling on <a> tag so after all id put descendant combinators selector "a" like below

[id^="p"] a{
 color: "red";
}