.pagination>{li => .page}

3 files changed, 33 insertions, 33 deletions

diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index 99d4220fa..d95e5447e 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -18,18 +18,18 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
 {% example html %}
 <nav>
   <ul class="pagination">
-    <li>
+    <li class="page">
       <a href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li><a href="#">1</a></li>
-    <li><a href="#">2</a></li>
-    <li><a href="#">3</a></li>
-    <li><a href="#">4</a></li>
-    <li><a href="#">5</a></li>
-    <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 href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
@@ -46,20 +46,20 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
 {% example html %}
 <nav>
   <ul class="pagination">
-    <li class="disabled">
+    <li class="page disabled">
       <a href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li class="active">
+    <li class="page active">
       <a href="#">1 <span class="sr-only">(current)</span></a>
     </li>
-    <li><a href="#">2</a></li>
-    <li><a href="#">3</a></li>
-    <li><a href="#">4</a></li>
-    <li><a href="#">5</a></li>
-    <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 href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
@@ -74,13 +74,13 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
 {% example html %}
 <nav>
   <ul class="pagination">
-    <li class="disabled">
+    <li class="page disabled">
       <span aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </span>
     </li>
-    <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
+    <li class="page active"><span>1 <span class="sr-only">(current)</span></span></li>
   </ul>
 </nav>
 {% endexample %}
@@ -93,16 +93,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 {% example html %}
 <nav>
   <ul class="pagination pagination-lg">
-    <li>
+    <li class="page">
       <a href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li><a href="#">1</a></li>
-    <li><a href="#">2</a></li>
-    <li><a href="#">3</a></li>
-    <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="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
@@ -115,16 +115,16 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 {% example html %}
 <nav>
   <ul class="pagination pagination-sm">
-    <li>
+    <li class="page">
       <a href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li><a href="#">1</a></li>
-    <li><a href="#">2</a></li>
-    <li><a href="#">3</a></li>
-    <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="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 282cd4886..1cb124b23 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -5,7 +5,7 @@
   margin-bottom: $spacer-y;
   @include border-radius();
 
-  > li {
+  .page {
     display: inline; // Remove list-style and block-level defaults
 
     > a,
@@ -35,8 +35,8 @@
     }
   }
 
-  > li > a,
-  > li > span {
+  .page > a,
+  .page > span {
     @include hover-focus {
       color: $pagination-hover-color;
       background-color: $pagination-hover-bg;
@@ -44,8 +44,8 @@
     }
   }
 
-  > .active > a,
-  > .active > span {
+  .page.active > a,
+  .page.active > span {
     @include plain-hover-focus {
       z-index: 2;
       color: $pagination-active-color;
@@ -55,7 +55,7 @@
     }
   }
 
-  > .disabled {
+  .page.disabled {
     > span,
     > a {
       @include plain-hover-focus {
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index d4a5404fc..11b3ed600 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -1,7 +1,7 @@
 // Pagination
 
 @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
-  > li {
+  .page {
     > a,
     > span {
       padding: $padding-vertical $padding-horizontal;