There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
You can also find further discussion and get answers to your questions over in Language Help.
Agree with a comment or answer? Like () to up-vote the contribution!
I noticed that when I added the hover pseudo selector to the links before the attribute selectors the on hover action did not occur. Only when I placed this code after the attribute selectors did it work. Do all pseudo selectors need to be declared after base element, class, and attribute styling declarations?
Could we please have the list of all the pseudo-classes? Or a link where we can find the list of all the pseudo-classes?
pseudo-classes seem interesting to design a website but also need to make sure not to overdo it.
No, it is not like you need to place the pseudo selectors after all other rulesets.
It is only the particular codecademy environment that is made in such a way that you add the new ruleset at the end unless specified to do so. This kind of makes it easier for them to write code to check if the learner is actually doing what is being asked to and what error pops up when that is not done.
Further, I would advise you to make a folder and copy-paste the HMLT and CSS code in notepad++ in separate files and try to open the HTML code in a new browser window to see how your CSS code is working. See how the file naming would affect the linking.
Adding a hover pseudo-class to your page is feeling like giving him a little bit of the soul
This changing of color feels like it’s alive (I think I need to rest more :D)
I can see no change after I have added the style rule in the css file.
The assignment is that I have to add a pseudo selector to change the colour of the links to dark orange on hover.
When I hover over the links the colour doesn’t change. Why is that?
I’m a bit confused here. Even though the specificity is the same for both rulesets, they are targeting different properties of the element. One is related to text color when there’s no interaction with the link, while the other is related to what happens to the text color once it is hovered over.
Why putting the hover ruleset before the text color ruleset nullifies the hover action? I was somehow expecting that both will apply
SITUATION A:
(a:hover placed at bottom of css file)
The a[href*=...] {...} rules will set the colors of the links to lightgreen, lightblue and lightpink as specified in the rules. This will show up on the webpage. When we hover over the links, then the a:hover {...} rule will come into play. Since the specificity of all these rules is same but the hover rule is placed at the bottom, so upon hovering, the hover rule will win and the color will change to darkorange. Once we stop hovering, the hover rule is no longer in play and we go back to the colors specified in the earlier rules.
SITUATION B: (a:hover placed before the a[href*=] rules)
When we are not hovering over the links, the a[href*=...] {...} rules will set the colors of the links to lightgreen, lightblue and lightpink as specified. This will show up on the webpage.
When we hover over the links, the a:hover {...} rule comes into play. Now, this rule wants to change the color of the link to darkorange. But, the a[href*=...] {...} rules want to keep the colors the same as before. Two rules are competing over the same property. Since the specificity is the same and the a[href*=...] {...} rules appear at the bottom, so they will win and the color won’t change to darkorange.
Think of it this way. The a:hover {...} rule comes into consideration only when hovering (a special case). When not hovering, it is silent.
In contrast, the a[href*=...] {...} rules are applicable in all situations (broader and more general). Whether you hover or don’t hover, these rules are active and want to impose their coloring preference.
) below.
) to up-vote the contribution!
