diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 5d56d4c17..3f0259019 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -376,11 +376,11 @@
   } @else {
     @include button(normal, $c:$bg);
   }
-  &:focus,
   &:hover {
     @include button(hover, $c:$bg);
   }
   &:active {@include button(active, $c:$bg);}
+  &:selected,
   &:checked {@include button(checked, $c:$bg);}
   &:insensitive {@include button(insensitive, $c:$bg);}
 }
diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 3842d8218..84455ddc0 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -204,11 +204,11 @@ export const PopupBaseMenuItem = GObject.registerClass({
         if (activeChanged) {
             this._active = active;
             if (active) {
-                this.add_style_class_name('selected');
+                this.add_style_pseudo_class('selected');
                 if (this.can_focus)
                     this.grab_key_focus();
             } else {
-                this.remove_style_class_name('selected');
+                this.remove_style_pseudo_class('selected');
                 // Remove the CSS active state if the user press the button and
                 // while holding moves to another menu item, so we don't paint all items.
                 // The correct behaviour would be to set the new item with the CSS