Refactor a few selectors. (#24404)

1. move a couple of them before the more specific ones.
2. change nesting to be under the same parent selector
3. use the ampersand more

1 files changed, 18 insertions, 18 deletions

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 6e83cf676f..97977f46d5 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -4,6 +4,24 @@
   @include border-radius();
 }
 
+.page-link {
+  position: relative;
+  display: block;
+  padding: $pagination-padding-y $pagination-padding-x;
+  margin-left: -$pagination-border-width;
+  line-height: $pagination-line-height;
+  color: $pagination-color;
+  background-color: $pagination-bg;
+  border: $pagination-border-width solid $pagination-border-color;
+
+  @include hover-focus {
+    color: $pagination-hover-color;
+    text-decoration: none;
+    background-color: $pagination-hover-bg;
+    border-color: $pagination-hover-border-color;
+  }
+}
+
 .page-item {
   &:first-child {
     .page-link {
@@ -32,24 +50,6 @@
   }
 }
 
-.page-link {
-  position: relative;
-  display: block;
-  padding: $pagination-padding-y $pagination-padding-x;
-  margin-left: -$pagination-border-width;
-  line-height: $pagination-line-height;
-  color: $pagination-color;
-  background-color: $pagination-bg;
-  border: $pagination-border-width solid $pagination-border-color;
-
-  @include hover-focus {
-    color: $pagination-hover-color;
-    text-decoration: none;
-    background-color: $pagination-hover-bg;
-    border-color: $pagination-hover-border-color;
-  }
-}
-
 
 //
 // Sizing