Pseudo-class question

HTML-CSS
1

Hey all!

So Ive been going through the fcc curriculum for a couple of months now and have started to venture out to other places to fill in the gaps about things I dont completely get. I found Internetingishard.com and have been working through their tutorials which have been a big help and are easy to understand. I finally came across something I dont quite get and figured I’d ask here. The section is on css and pseudo-classes. I am just confused about the following code

.call-to-action:link,
.call-to-action:visited {
  font-style: italic;
  background-color: #EEB75A;     /* Yellow */
}

.call-to-action:hover,
.call-to-action:visited:hover {
  background-color: #F5CF8E;     /* Light yellow */
}

.call-to-action:active,
.call-to-action:visited:active {
  background-color: #EEB75A;     /* Yellow */

on declaration block 2 and 3 there are two pseudo-classes on one line (:visited:hover, :visited:active) and I cant figure out why they did that and they dont explain what exactly it does. Here is a link to the lesson https://internetingishard.com/html-and-css/css-selectors/. maybe someone can explain to me what this does.

1 Like
2

Sure, let me give it a whirl.

So, you know you can combine selectors, right? For example, I could use these in my CSS, they’re all perfectly valid:

div#main-content-div            /* Indicates a div with the id main-content-div */
#main-content-div.is-visible   /* Indicates an element with the id main-content-div AND the class is-visible */
#main-content-div.is-visible:hover  /* triggered when the user hovers over an el with the id and class */

Each of these rules are more specific, in terms of how they “cascade”, so the rules in the LAST selector would over-ride the rules from the FIRST (that’s the nature of CSS - the more specific rule takes precedence.

So, in the second and third rules, they’re simply combining selectors:

.call-to-action:visited {
  font-style: italic;
  background-color: #EEB75A;
} /*triggered when an el with the class call-to-action on the current page has been visited */

.call-to-action:visited:hover {
  background-color: #F5CF8E;
} /* the same as above, BUT only triggered when that element is hovered. Also, it only overrides the color, leaving the font-style: italic untouched.  */

.call-to-action:visited:active {
  background-color: #EEB75A;
} /* Same as the first rule, but with the same "specificity" as the second rule - this one triggers when an el with the class call-to-action has already been visited, AND when the user has clicked (shows when they're holding it down). This one, too, does not override the first rules font-style  */

So it’s the same as you’ve already done: simply combining selectors. You could create anchor rules that simply say “if the user has already visited this link, and they hover over it again, do something.” The css for that? :visited:hover. That would take any element that has been visited (pretty sure that’s limited to links) AND that the user is currently hovering over.

1 Like
3

So it’s the same as you’ve already done: simply combining selectors. You could create anchor rules that simply say “if the user has already visited this link, and they hover over it again, do something.” The css for that? :visited:hover . That would take any element that has been visited (pretty sure that’s limited to links) AND that the user is currently hovering over.

Thank you for your detailed reply! This is what i figured but couldn’t find anything in details on it. Your answer definitely cleared things up for me. thanks again!

1 Like