Dragosh Craciun Dragosh Craciun - 25 days ago 7
CSS Question

multiple a href with different colors

How can I use two or more colors for multiple

a href
?
For example:



a {color: white;}
#colorGreen {color: green;}

<div id="navBar">
<p><a id="colorGreen" href="home.html">home</a><a id="colorGreen" href="page1.html"> page1</a> page2</p>
</div>

<div id="textDiv">
<p><a href="link1.html">link1</a></p>
<p><a href="link2.html">link2</a></p>
<p><a href="link3.html">link3</a></p>
</div>





It only works if the
id="colorGreen"
is given to the
a href
and it does not work if it is given to the
p
that contains all the link and neither to the
div
.

Is there a better way to write this?

Thx.

Answer Source

Your css already defines that any <a> element will have color white. This means that setting a color on <p> will not affect its containing <a> elements.

Consider the following:

a {
  color: blue;
}

p {
  color:red;
}
<div id="textDiv">
  <p><a href="link1.html">link1</a></p>
</div>

Note that although you set <p> to use color red, the inner <a> element's color will take precedence.

You can override that color by defining a selector with more specificity, like so:

a {
  color: blue;
}

p a {
  color: red;
}
<div id="textDiv">
  <p><a href="link1.html">link1</a></p>
</div>

In other words, apply the red color to any <a> element that is a child of a <p> element.

Please review the following resources on css selectors and selector specificity.