Home / Questions / 207472
Accepted
lean2016
Asked: 2020-10-25 07:01:41 +0800 CST 2020-10-25 07:01:41 +0800 CST

How do I set the same CSS style for the links of two elements (2 id)?

  • 772

I want to give the same style to 2 particular links and my current code is the following:

a#id1:link {color:darkgray;}
a#id1:hover {color:white;}
a#id1:active {color:red;}
a#id1:visited {color:black;}

a#id2:link {color:darkgray;}
a#id2:hover {color:white;}
a#id2:active {color:red;}
a#id2:visited {color:black;}

How can I summarize it? I tried something like a#id1#id2:link {color:darkgray;} but it doesn't work.

Greetings, Leandro.

css

2 Answers

  1. Best Answer

    You just group them with a comma separator indicating that the same rule is applied to both selectors like so:

    a#id1:link,a#id2:link{color:darkgray;}
a#id1:hover,a#id2:hover {color:white;}
a#id1:active, a#id2:active {color:red;}
a#id1:visited, a#id2:visited {color:black;}
    <a id="id1">Link1</a><a id="id2">Link2</a>

    Adding @alanfcm's solution:

    As alanfcm said in the comment you can also add a common class for both like this:

    a.link:link{color:darkgray;}
a.link:hover{color:white;}
a.link:active{color:red;}
a.link:visited{color:black;}
    <a id="id1" class="link">Link1</a><a id="id2" class="link">Link2</a>

    • 1

  2. You can also create a class for both links:

    <a href="#" id="id1" class="gris"><a href="#" id="id2" class="gris">

    and the css would be:

    .gris{ color:darkgray;}
    • 0