.page>{a,span => .page-link}

3 files changed, 35 insertions, 44 deletions

diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index d95e5447e..a560dbde3 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -19,18 +19,18 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
 <nav>
   <ul class="pagination">
     <li class="page">
-      <a href="#" aria-label="Previous">
+      <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li class="page"><a href="#">1</a></li>
-    <li class="page"><a href="#">2</a></li>
-    <li class="page"><a href="#">3</a></li>
-    <li class="page"><a href="#">4</a></li>
-    <li class="page"><a href="#">5</a></li>
+    <li class="page"><a class="page-link" href="#">1</a></li>
+    <li class="page"><a class="page-link" href="#">2</a></li>
+    <li class="page"><a class="page-link" href="#">3</a></li>
+    <li class="page"><a class="page-link" href="#">4</a></li>
+    <li class="page"><a class="page-link" href="#">5</a></li>
     <li class="page">
-      <a href="#" aria-label="Next">
+      <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
       </a>
@@ -47,20 +47,20 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
 <nav>
   <ul class="pagination">
     <li class="page disabled">
-      <a href="#" aria-label="Previous">
+      <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
     <li class="page active">
-      <a href="#">1 <span class="sr-only">(current)</span></a>
+      <a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
     </li>
-    <li class="page"><a href="#">2</a></li>
-    <li class="page"><a href="#">3</a></li>
-    <li class="page"><a href="#">4</a></li>
-    <li class="page"><a href="#">5</a></li>
+    <li class="page"><a class="page-link" href="#">2</a></li>
+    <li class="page"><a class="page-link" href="#">3</a></li>
+    <li class="page"><a class="page-link" href="#">4</a></li>
+    <li class="page"><a class="page-link" href="#">5</a></li>
     <li class="page">
-      <a href="#" aria-label="Next">
+      <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
       </a>
@@ -75,12 +75,12 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
 <nav>
   <ul class="pagination">
     <li class="page disabled">
-      <span aria-label="Previous">
+      <span class="page-link" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </span>
     </li>
-    <li class="page active"><span>1 <span class="sr-only">(current)</span></span></li>
+    <li class="page active"><span class="page-link">1 <span class="sr-only">(current)</span></span></li>
   </ul>
 </nav>
 {% endexample %}
@@ -94,16 +94,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 <nav>
   <ul class="pagination pagination-lg">
     <li class="page">
-      <a href="#" aria-label="Previous">
+      <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li class="page"><a href="#">1</a></li>
-    <li class="page"><a href="#">2</a></li>
-    <li class="page"><a href="#">3</a></li>
+    <li class="page"><a class="page-link" href="#">1</a></li>
+    <li class="page"><a class="page-link" href="#">2</a></li>
+    <li class="page"><a class="page-link" href="#">3</a></li>
     <li class="page">
-      <a href="#" aria-label="Next">
+      <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
       </a>
@@ -116,16 +116,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 <nav>
   <ul class="pagination pagination-sm">
     <li class="page">
-      <a href="#" aria-label="Previous">
+      <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li class="page"><a href="#">1</a></li>
-    <li class="page"><a href="#">2</a></li>
-    <li class="page"><a href="#">3</a></li>
+    <li class="page"><a class="page-link" href="#">1</a></li>
+    <li class="page"><a class="page-link" href="#">2</a></li>
+    <li class="page"><a class="page-link" href="#">3</a></li>
     <li class="page">
-      <a href="#" aria-label="Next">
+      <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
       </a>
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 1cb124b23..c7eafa185 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -8,8 +8,7 @@
   .page {
     display: inline; // Remove list-style and block-level defaults
 
-    > a,
-    > span {
+    .page-link {
       position: relative;
       float: left; // Collapse white-space
       padding: $pagination-padding-y $pagination-padding-x;
@@ -21,22 +20,19 @@
       border: $pagination-border-width solid $pagination-border-color;
     }
     &:first-child {
-      > a,
-      > span {
+      .page-link {
         margin-left: 0;
         @include border-left-radius($border-radius);
       }
     }
     &:last-child {
-      > a,
-      > span {
+      .page-link {
         @include border-right-radius($border-radius);
       }
     }
   }
 
-  .page > a,
-  .page > span {
+  .page .page-link {
     @include hover-focus {
       color: $pagination-hover-color;
       background-color: $pagination-hover-bg;
@@ -44,8 +40,7 @@
     }
   }
 
-  .page.active > a,
-  .page.active > span {
+  .page.active .page-link {
     @include plain-hover-focus {
       z-index: 2;
       color: $pagination-active-color;
@@ -56,8 +51,7 @@
   }
 
   .page.disabled {
-    > span,
-    > a {
+    .page-link {
       @include plain-hover-focus {
         color: $pagination-disabled-color;
         cursor: $cursor-disabled;
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index 11b3ed600..32c8de0b7 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -2,21 +2,18 @@
 
 @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
   .page {
-    > a,
-    > span {
+    .page-link {
       padding: $padding-vertical $padding-horizontal;
       font-size: $font-size;
       line-height: $line-height;
     }
     &:first-child {
-      > a,
-      > span {
+      .page-link {
         @include border-left-radius($border-radius);
       }
     }
     &:last-child {
-      > a,
-      > span {
+      .page-link {
         @include border-right-radius($border-radius);
       }
     }