Why two a classes?

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:

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.

1 Like

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

1 Like

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?

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.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.