# Pseudo class not being added
**URL:** https://forum.pinegrow.com/t/pseudo-class-not-being-added/5514
**Category:** Beginners
**Created:** [August 3, 2021, 7:46pm UTC](https://forum.pinegrow.com/t/pseudo-class-not-being-added/5514 "2021-08-03T19:46:46Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [August 3, 2021, 7:46pm UTC](https://forum.pinegrow.com/t/pseudo-class-not-being-added/5514/1 "2021-08-03T19:46:46Z")
My hover isn’t being added with nav-link:hover? I watched and read Rob’s pseudo classes tutorial. What am I missing?
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [August 3, 2021, 8:29pm UTC](https://forum.pinegrow.com/t/pseudo-class-not-being-added/5514/2 "2021-08-03T20:29:32Z")
Does it work if you open the page in the browser?
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [August 3, 2021, 9:13pm UTC](https://forum.pinegrow.com/t/pseudo-class-not-being-added/5514/3 "2021-08-03T21:13:53Z")
Hover doesn’t work in my nice local browser. When I create the nav-link:hover class, the “Add class to the selected element” check box disappears. How does a pseudo class attach to element?
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [August 4, 2021, 2:26am UTC](https://forum.pinegrow.com/t/pseudo-class-not-being-added/5514/4 "2021-08-04T02:26:39Z")
> [@RobM](#):
>
> Does it work if you open the page in the browser?
Nope, plus I seem to have zapped my red circle icons hover below, too. [Pinegrow | Bootstrap Blocks Template](http://mcgraphics.us/poetry)
Still my media sizes work fairly well.
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [August 4, 2021, 9:29am UTC](https://forum.pinegrow.com/t/pseudo-class-not-being-added/5514/5 "2021-08-04T09:29:30Z")
Hi @kat,
So, pseudo-classes only exist as states added by the browser. They aren’t “added” as classes to your elements like a normal class would be. Instead, the browser reads your stylesheet and finds any selectors with a ‘:hover’ and then keeps track of those elements.
So, on to your problems.
Starting with the red play circles. If I go into the dev tools, I can see a partial rule. The selector and property are okay, but the value is incomplete. It is: `background-color: b;`. Changing that to `background-color: blue` makes it work fine.
For the navigation link. I can see you made several attempts without success. Here, DevTools are your friend. Looking at the element you can see what color is being applied and what the ruleset looks like.
So, the third rule down is the winner. Bootstrap is fairly opinionated and for some colors adds an `!important`. In order to overcome this you don’t have much choice but to add an `!important` to your ruleset. So - `.nav-link:hover { color: #e1a855 !important; }`
Actually, thinking about it, you would also see this in Pinegrow if you opened up the additional hidden rules in bootstrap.css by clicking on the greyed-out link in your Styles panel.
Good Luck,
Bob
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [August 4, 2021, 4:01pm UTC](https://forum.pinegrow.com/t/pseudo-class-not-being-added/5514/6 "2021-08-04T16:01:45Z")
Really great explanation!
New Qs
1. When selecting color in color panel how do you use the color picker eyedropper? I’ve tried clicking all over the place.
2. Anyway to add an outline to text?
`.title { text-shadow: 0px 7px 0px rgba(21, 74, 110, 0.68); text-align: right; grid-area: 2 / 2 / 3 / 5; color: #f8eecf; box-shadow: 10; font-size: 81px; }`
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [August 4, 2021, 6:15pm UTC](https://forum.pinegrow.com/t/pseudo-class-not-being-added/5514/7 "2021-08-04T18:15:20Z")
Hi @kat,
1. After clicking on the eyedropper your pointer should turn into a cross. Hovering over anything in the app will bring up a color. Just click when you find the color you like.
2. Not quite sure what you are looking for, but you could use `-webkit-text-stroke`. Just be aware that IE and some older browsers don’t support it so you have to supply a fallback. Since it isn’t an approved W3C styling there isn’t a visual control in Pinegrow for it. You will have to type the rule in manually.
Cheers,
Bob