Why two a classes?

[DJFearRoss]

Hi.
Not too sure why this bit

 a:hover {
    color:blue;
  }

could not go in here:

a {
    color: #000;
  }

  **Your code so far**

<style>
a {
  color: #000;
}

a:hover {
  color:blue;
}



</style>
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Challenge: Adjust the Hover State of an Anchor Tag

Link to the challenge:

freeCodeCamp.org

[ArielLeslie]

@DJFearRoss

 a:hover {
    color:blue;
  }

This will make the text blue only when you hover over the a element.
if you.
These two selectors will mean that the link color is black most of the time, but blue when you hover over it.

[kevinSmith]

And just to be clear, when she says “hover”, she means that the mouse pointer is “hovering” over that element on the page.

[DJFearRoss]

But why did they need to create another ‘a class’ ?
Just seems a bit strange, if you already have ‘a class’ , what is the reason for not putting a simple ‘hover…’ in there? Why do you need another class altogether just for that?

[ArielLeslie]

Just a little vocabulary thing - you’re creating selectors.

Very often when you’re using CSS there will be overlap in your selectors. You want one rule that targets “all links” and applies a style to them. You also want a rule that finds “links that users are currently hovering over” and applies a different style. You could hypothetically also want to target “all links that are inside the navigation menu” and make them look different. And so on. All of those would include a as part of the selector.