diff --git a/core/includes/pager.inc b/core/includes/pager.inc
index 3dae62e..dd731f8 100644
--- a/core/includes/pager.inc
+++ b/core/includes/pager.inc
@@ -219,196 +219,74 @@ function template_preprocess_pager(&$variables) {
   }
   // End of generation loop preparation.
 
-  $li_first = '';
-  $li_previous = '';
-  $li_next = '';
-  $li_last = '';
   $current_path = current_path();
 
   // Create the "first" and "previous" links if we are not on the first page.
   if ($pager_page_array[$element] > 0) {
-    $li_first = array(
-      '#type' => 'link',
-      '#title' => $tags[0],
-      '#href' => $current_path,
-      '#options' => array(
-        'query' => pager_query_add_page($parameters, $element, 0),
-        'attributes' => array(
-          'title' => t('Go to first page'),
-        ),
-        // Below is ignored by default, supplied to support hook_link_alter
-        // implementations.
-        'pager_context' => array(
-          'link_type' => 'first',
-          'element' => $element,
-        ),
-      ),
+    $items['first'] = array();
+    $options = array(
+      'query' => pager_query_add_page($parameters, $element, 0),
     );
-    $li_previous = array(
-      '#type' => 'link',
-      '#title' => $tags[1],
-      '#href' => $current_path,
-      '#options' => array(
-        'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] - 1),
-        'attributes' => array(
-          'title' => t('Go to previous page'),
-          'rel' => 'prev',
-        ),
-        // Below is ignored by default, supplied to support hook_link_alter
-        // implementations.
-        'pager_context' => array(
-          'link_type' => 'previous',
-          'element' => $element,
-        ),
-      ),
-    );
-  }
+    $items['first']['href'] = url($current_path, $options);
+    $items['first']['text'] = $tags[0];
+    $items['first']['attributes'] = new Attribute(array('title' => t('Go to first page')));
 
-  // Create the "last" and "next" links if we are not on the last page.
-  if ($pager_page_array[$element] < ($pager_total[$element] - 1)) {
-    $li_next = array(
-      '#type' => 'link',
-      '#title' => $tags[3],
-      '#href' => $current_path,
-      '#options' => array(
-        'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] + 1),
-        'attributes' => array(
-          'title' => t('Go to next page'),
-          'rel' => 'next',
-        ),
-        // Below is ignored by default, supplied to support hook_link_alter
-        // implementations.
-        'pager_context' => array(
-          'link_type' => 'next',
-          'element' => $element,
-        ),
-      ),
-    );
-    $li_last = array(
-      '#type' => 'link',
-      '#title' => $tags[4],
-      '#href' => $current_path,
-      '#options' => array(
-        'query' => pager_query_add_page($parameters, $element, $pager_total[$element] - 1),
-        'attributes' => array(
-          'title' => t('Go to last page'),
-        ),
-        // Below is ignored by default, supplied to support hook_link_alter
-        // implementations.
-        'pager_context' => array(
-          'link_type' => 'last',
-          'element' => $element,
-        ),
-      ),
+    $items['previous'] = array();
+    $options = array(
+      'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] - 1),
     );
+    $items['previous']['href'] = url($current_path, $options);
+    $items['previous']['text'] = $tags[1];
+    $items['previous']['attributes'] = new Attribute(array(
+      'title' => t('Go to previous page'),
+      'rel' => 'prev',
+    ));
   }
 
-  if ($pager_total[$element] > 1) {
-    if ($li_first) {
-      $items[] = array(
-        '#wrapper_attributes' => array('class' => array('pager-first')),
-        'link' => $li_first,
-      );
+  if ($i != $pager_max) {
+    // Add an ellipsis if there are further previous pages.
+    if ($i > 1) {
+      $items['ellipsis']['previous'] = TRUE;
     }
-    if ($li_previous) {
-      $items[] = array(
-        '#wrapper_attributes' => array('class' => array('pager-previous')),
-        'link' => $li_previous,
+    // Now generate the actual pager piece.
+    for (; $i <= $pager_last && $i <= $pager_max; $i++) {
+      $options = array(
+        'query' => pager_query_add_page($parameters, $element, $i - 1),
       );
-    }
-
-    // When there is more than one page, create the pager list.
-    if ($i != $pager_max) {
-      // Check whether there are further previous pages.
-      if ($i > 1) {
-        $items[] = array(
-          '#wrapper_attributes' => array('class' => array('pager-ellipsis')),
-          '#markup' => '…',
-        );
-      }
-      // Now generate the actual pager piece.
-      for (; $i <= $pager_last && $i <= $pager_max; $i++) {
-        if ($i < $pager_current) {
-          $items[] = array(
-            '#wrapper_attributes' => array('class' => array('pager-item')),
-            'link' => array(
-              '#type' => 'link',
-              '#title' => $i,
-              '#href' => $current_path,
-              '#options' => array(
-                'query' => pager_query_add_page($parameters, $element, $i - 1),
-                'attributes' => array(
-                  'title' => t('Go to page @number', array('@number' => $i)),
-                ),
-                // Below is ignored by default, supplied to support hook_link_alter
-                // implementations.
-                'pager_context' => array(
-                  'link_type' => 'item',
-                  'element' => $element,
-                  'interval' => ($pager_current - $i),
-                ),
-              ),
-            ),
-          );
-        }
-        if ($i == $pager_current) {
-          $items[] = array(
-            '#wrapper_attributes' => array('class' => array('pager-current')),
-            '#markup' => $i,
-          );
-        }
-        if ($i > $pager_current) {
-          $items[] = array(
-            '#wrapper_attributes' => array('class' => array('pager-item')),
-            'link' => array(
-              '#type' => 'link',
-              '#title' => $i,
-              '#href' => $current_path,
-              '#options' => array(
-                'query' => pager_query_add_page($parameters, $element, $i - 1),
-                'attributes' => array(
-                  'title' => t('Go to page @number', array('@number' => $i)),
-                ),
-                // Below is ignored by default, supplied to support hook_link_alter
-                // implementations.
-                'pager_context' => array(
-                  'link_type' => 'item',
-                  'element' => $element,
-                  'interval' => ($i - $pager_current),
-                ),
-              ),
-            ),
-          );
-        }
-      }
-      // Check whether there are further next pages.
-      if ($i < $pager_max) {
-        $items[] = array(
-          '#wrapper_attributes' => array('class' => array('pager-ellipsis')),
-          '#markup' => '…',
-        );
+      $items['pages'][$i]['href'] = url($current_path, $options);
+      if ($i == $pager_current) {
+        $items['current'] = $i;
       }
     }
-    // End generation.
-    if ($li_next) {
-      $items[] = array(
-        '#wrapper_attributes' => array('class' => array('pager-next')),
-        'link' => $li_next,
-      );
-    }
-    if ($li_last) {
-      $items[] = array(
-        '#wrapper_attributes' => array('class' => array('pager-last')),
-        'link' => $li_last,
-      );
+    // Add an ellipsis if there are further next pages.
+    if ($i < $pager_max) {
+      $items['ellipsis']['next'] = TRUE;
     }
+  }
 
-    $variables['items'] = array(
-      '#theme' => 'item_list__pager',
-      '#items' => $items,
-      '#attributes' => array('class' => array('pager')),
+  // Create the "next" and "last" links if we are not on the last page.
+  if ($pager_page_array[$element] < ($pager_max - 1)) {
+    $items['next'] = array();
+    $options = array(
+      'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] + 1),
     );
+    $items['next']['href'] = url($current_path, $options);
+    $items['next']['text'] = $tags[3];
+    $items['next']['attributes'] = new Attribute(array(
+      'title' => t('Go to next page'),
+      'rel' => 'next',
+    ));
+
+    $items['last'] = array();
+    $options = array(
+      'query' => pager_query_add_page($parameters, $element, $pager_max - 1),
+    );
+    $items['last']['href'] = url($current_path, $options);
+    $items['last']['text'] = $tags[4];
+    $items['last']['attributes'] = new Attribute(array('title' => t('Go to last page')));
   }
+
+  $variables['items'] = $items;
 }
 
 /**
diff --git a/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php b/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php
index d967d1b..c9c5fd5 100644
--- a/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php
+++ b/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php
@@ -97,7 +97,7 @@ public function testFeedPage() {
 
     // Check for presence of an aggregator pager.
     $this->drupalGet('aggregator');
-    $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager'));
+    $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager__items'));
     $this->assertTrue(!empty($elements), 'Individual source page contains a pager.');
 
     // Check for sources page title.
@@ -115,7 +115,7 @@ public function testFeedPage() {
 
     // Check for the presence of a pager.
     $this->drupalGet('aggregator/sources/' . $feed->id());
-    $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager'));
+    $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager__items'));
     $this->assertTrue(!empty($elements), 'Individual source page contains a pager.');
     $cache_tags = explode(' ', $this->drupalGetHeader('X-Drupal-Cache-Tags'));
     $this->assertTrue(in_array('aggregator_feed:' . $feed->id(), $cache_tags));
diff --git a/core/modules/comment/src/Tests/CommentPagerTest.php b/core/modules/comment/src/Tests/CommentPagerTest.php
index 9853d1c..69e471d 100644
--- a/core/modules/comment/src/Tests/CommentPagerTest.php
+++ b/core/modules/comment/src/Tests/CommentPagerTest.php
@@ -8,6 +8,7 @@
 namespace Drupal\comment\Tests;
 
 use Drupal\comment\CommentManagerInterface;
+use Drupal\Component\Utility\String;
 
 /**
  * Tests paging of comments and their settings.
@@ -329,22 +330,52 @@ function testTwoPagers() {
     $this->assertRaw('Comment 1 on field comment');
     $this->assertRaw('Comment 1 on field comment_2');
     // Navigate to next page of field 1.
-    $this->clickLink('next ›');
+    $this->clickLinkWithXPath('//a[@rel="next"]');
     // Check only one pager updated.
     $this->assertRaw('Comment 2 on field comment');
     $this->assertRaw('Comment 1 on field comment_2');
     // Return to page 1.
     $this->drupalGet('node/' . $node->id());
     // Navigate to next page of field 2.
-    $this->clickLink('next ›', 1);
+    $this->clickLinkWithXPath('//a[@rel="next"]', 1);
     // Check only one pager updated.
     $this->assertRaw('Comment 1 on field comment');
     $this->assertRaw('Comment 2 on field comment_2');
     // Navigate to next page of field 1.
-    $this->clickLink('next ›');
+    $this->clickLinkWithXPath('//a[@rel="next"]');
     // Check only one pager updated.
     $this->assertRaw('Comment 2 on field comment');
     $this->assertRaw('Comment 2 on field comment_2');
   }
 
+  /**
+   * Follows a link found at a give xpath query.
+   *
+   * Will click the first link found with the given xpath query by default,
+   * or a later one if an index is given.
+   *
+   * If the link is discovered and clicked, the test passes. Fail otherwise.
+   *
+   * @param $xpath
+   *   An xpath query that targets an anchor tag, or set of anchor tags.
+   * @param $index
+   *   Link position counting from zero.
+   *
+   * @return
+   *   Page contents on success, or FALSE on failure.
+   *
+   * @see WebTestBase::clickLink()
+   */
+  protected function clickLinkWithXPath($xpath, $index = 0) {
+    $url_before = $this->getUrl();
+    $urls = $this->xpath($xpath);
+    if (isset($urls[$index])) {
+      $url_target = $this->getAbsoluteUrl($urls[$index]['href']);
+      $this->pass(String::format('Clicked link %label (@url_target) from @url_before', array('%label' => $xpath, '@url_target' => $url_target, '@url_before' => $url_before)), 'Browser');
+      return $this->drupalGet($url_target);
+    }
+    $this->fail(String::format('Link %label does not exist on @url_before', array('%label' => $xpath, '@url_before' => $url_before)), 'Browser');
+    return FALSE;
+  }
+
 }
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index 7023b4f..cec93a4 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -160,17 +160,17 @@ abbr.ajax-changed {
 /**
  * Markup generated by pager.html.twig.
  */
-.item-list .pager {
+.pager__items {
   clear: both;
   text-align: center;
 }
-.item-list .pager li {
+.pager__item {
   background-image: none;
   display: inline;
   list-style-type: none;
   padding: 0.5em;
 }
-.pager-current {
+.pager__item.is-active {
   font-weight: bold;
 }
 
diff --git a/core/modules/system/src/Tests/Pager/PagerTest.php b/core/modules/system/src/Tests/Pager/PagerTest.php
index b708e29..3ab3bba 100644
--- a/core/modules/system/src/Tests/Pager/PagerTest.php
+++ b/core/modules/system/src/Tests/Pager/PagerTest.php
@@ -55,7 +55,7 @@ function testActiveClass() {
     $this->assertPagerItems($current_page);
 
     // Verify last page.
-    $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager-last'));
+    $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager__item-last'));
     preg_match('@page=(\d+)@', $elements[0]['href'], $matches);
     $current_page = (int) $matches[1];
     $this->drupalGet($GLOBALS['base_root'] . $elements[0]['href'], array('external' => TRUE));
@@ -69,7 +69,7 @@ function testActiveClass() {
    *   The current pager page the internal browser is on.
    */
   protected function assertPagerItems($current_page) {
-    $elements = $this->xpath('//ul[@class=:class]/li', array(':class' => 'pager'));
+    $elements = $this->xpath('//ul[@class=:class]/li', array(':class' => 'pager__items'));
     $this->assertTrue(!empty($elements), 'Pager found.');
 
     // Make current page 1-based.
@@ -92,14 +92,13 @@ protected function assertPagerItems($current_page) {
       // Make item/page index 1-based.
       $page++;
       if ($current_page == $page) {
-        $this->assertClass($element, 'pager-current', 'Item for current page has .pager-current class.');
-        $this->assertFalse(isset($element->a), 'Item for current page has no link.');
+        $this->assertClass($element, 'is-active', 'Element for current page has .is-active class.');
+        $this->assertTrue($element->a, 'Element for current page has link.');
       }
       else {
-        $this->assertNoClass($element, 'pager-current', "Item for page $page has no .pager-current class.");
-        $this->assertClass($element, 'pager-item', "Item for page $page has .pager-item class.");
+        $this->assertNoClass($element, 'is-active', "Element for page $page has no .is-active class.");
+        $this->assertClass($element, 'pager__item', "Element for page $page has .pager__item class.");
         $this->assertTrue($element->a, "Link to page $page found.");
-        $this->assertNoClass($element->a, 'active', "Link to page $page is not active.");
       }
       unset($elements[--$page]);
     }
@@ -108,24 +107,24 @@ protected function assertPagerItems($current_page) {
 
     // Verify first/previous and next/last items and links.
     if (isset($first)) {
-      $this->assertClass($first, 'pager-first', 'Item for first page has .pager-first class.');
+      $this->assertClass($first, 'pager__item-first', 'Element for first page has .pager__item-first class.');
       $this->assertTrue($first->a, 'Link to first page found.');
-      $this->assertNoClass($first->a, 'active', 'Link to first page is not active.');
+      $this->assertNoClass($first->a, 'is-active', 'Link to first page is not active.');
     }
     if (isset($previous)) {
-      $this->assertClass($previous, 'pager-previous', 'Item for first page has .pager-previous class.');
+      $this->assertClass($previous, 'pager__item-previous', 'Element for first page has .pager__item-previous class.');
       $this->assertTrue($previous->a, 'Link to previous page found.');
-      $this->assertNoClass($previous->a, 'active', 'Link to previous page is not active.');
+      $this->assertNoClass($previous->a, 'is-active', 'Link to previous page is not active.');
     }
     if (isset($next)) {
-      $this->assertClass($next, 'pager-next', 'Item for next page has .pager-next class.');
+      $this->assertClass($next, 'pager__item-next', 'Element for next page has .pager__item-next class.');
       $this->assertTrue($next->a, 'Link to next page found.');
-      $this->assertNoClass($next->a, 'active', 'Link to next page is not active.');
+      $this->assertNoClass($next->a, 'is-active', 'Link to next page is not active.');
     }
     if (isset($last)) {
-      $this->assertClass($last, 'pager-last', 'Item for last page has .pager-last class.');
+      $this->assertClass($last, 'pager__item-last', 'Element for last page has .pager__item-last class.');
       $this->assertTrue($last->a, 'Link to last page found.');
-      $this->assertNoClass($last->a, 'active', 'Link to last page is not active.');
+      $this->assertNoClass($last->a, 'is-active', 'Link to last page is not active.');
     }
   }
 
diff --git a/core/modules/system/templates/pager.html.twig b/core/modules/system/templates/pager.html.twig
index 47b20a7..3397739 100644
--- a/core/modules/system/templates/pager.html.twig
+++ b/core/modules/system/templates/pager.html.twig
@@ -5,6 +5,25 @@
  *
  * Available variables:
  * - items: List of pager items.
+ *   The list is keyed by the following elements:
+ *   - first: Item for the first page; not present on the first page of results.
+ *   - previous: Item for the previous page; not present on the first page
+ *     of results.
+ *   - next: Item for the next page; not present on the last page of results.
+ *   - last: Item for the last page; not present on the last page of results.
+ *   - pages: List of pages, keyed by page numer.
+ *   - current: The page number of the current page.
+ *   - ellipsis: If there are more pages than the quantity allows, then an
+ *     ellipsis before or after the listed pages may be present.
+ *
+ *   Special case sub-sub-elements:
+ *
+ *   items.first, items.previous, items.next, items.last and each item inside
+ *   items.pages contain the following elements:
+ *     - href: URL with appropriate query parameters for the item.
+ *     - attributes: A keyed list of HTML attributes for the item.
+ *     - text: The visible text used for the item link, such as "‹ previous"
+ *       or "next ›".
  *
  * @see template_preprocess_pager()
  *
@@ -12,6 +31,64 @@
  */
 #}
 {% if items %}
-  <h2 class="visually-hidden">{{ 'Pages'|t }}</h2>
-  {{ items }}
+  <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
+    <h4 id="pagination-heading" class="visually-hidden">{{ 'Pagination'|t }}</h4>
+    <ul class="pager__items">
+      {% if items.first %}
+        <li class="pager__item pager__item-first">
+          <a href="{{ items.first.href }}"{{ items.first.attributes }}>
+            <span class="visually-hidden">{{ "First page"|t }}</span>
+            <span aria-hidden="true">{{ items.first.text }}</span>
+          </a>
+        </li>
+      {% endif %}
+      {% if items.previous %}
+        <li class="pager__item pager__item-previous">
+          <a href="{{ items.previous.href }}"{{ items.previous.attributes }}>
+            <span class="visually-hidden">{{ "Previous page"|t }}</span>
+            <span aria-hidden="true">{{ items.previous.text }}</span>
+          </a>
+        </li>
+      {% endif %}
+      {% if items.ellipsis.previous %}
+        <li class="pager__item pager__item-ellipsis" role="presentation">&hellip;</li>
+      {% endif %}
+      {% for key, item in items.pages %}
+        <li class="pager__item {{ items.current == key ? 'is-active' : '' }}">
+          {% if items.current == key %}
+            {% set title = "Current page"|t %}
+          {% else %}
+            {% set title %}
+              {% trans %}Go to page {{ key }}{% endtrans %}
+            {% endset %}
+          {% endif %}
+          <a href="{{ item.href }}" title="{{ title }}"{{ item.attributes|title }}>
+            <span class="visually-hidden">
+              {{ items.current == key ? "Current page"|t : "Page"|t }}
+            </span>
+            {{ key }}
+          </a>
+        </li>
+      {% endfor %}
+      {% if items.ellipsis.next %}
+        <li class="pager__item pager__item-ellipsis" role="presentation">&hellip;</li>
+      {% endif %}
+      {% if items.next %}
+        <li class="pager__item pager__item-next">
+          <a href="{{ items.next.href }}"{{ items.next.attributes }}>
+            <span class="visually-hidden">{{ "Next page"|t }}</span>
+            <span aria-hidden="true">{{ items.next.text }}</span>
+          </a>
+        </li>
+      {% endif %}
+      {% if items.last %}
+        <li class="pager__item pager__item-last">
+          <a href="{{ items.last.href }}"{{ items.last.attributes }}>
+            <span class="visually-hidden">{{ "Last page"|t }}</span>
+            <span aria-hidden="true">{{ items.last.text }}</span>
+          </a>
+        </li>
+      {% endif %}
+    </ul>
+  </nav>
 {% endif %}
diff --git a/core/modules/views_ui/src/Tests/PreviewTest.php b/core/modules/views_ui/src/Tests/PreviewTest.php
index f133354..b328e98 100644
--- a/core/modules/views_ui/src/Tests/PreviewTest.php
+++ b/core/modules/views_ui/src/Tests/PreviewTest.php
@@ -106,59 +106,59 @@ public function testPreviewWithPagersUI() {
     $this->getPreviewAJAX('test_pager_full', 'default', 5);
 
     // Test that the pager is present and rendered.
-    $elements = $this->xpath('//ul[@class = "pager"]/li');
+    $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items'));
     $this->assertTrue(!empty($elements), 'Full pager found.');
 
     // Verify elements and links to pages.
     // We expect to find 5 elements: current page == 1, links to pages 2 and
     // and 3, links to 'next >' and 'last >>' pages.
-    $this->assertClass($elements[0], 'pager-current', 'Element for current page has .pager-current class.');
-    $this->assertFalse(isset($elements[0]->a), 'Element for current page has no link.');
+    $this->assertClass($elements[0], 'is-active', 'Element for current page has .is-active class.');
+    $this->assertTrue($elements[0]->a, 'Element for current page has link.');
 
-    $this->assertClass($elements[1], 'pager-item', "Element for page 2 has .pager-item class.");
-    $this->assertTrue($elements[1]->a, "Link to page 2 found.");
+    $this->assertClass($elements[1], 'pager__item', 'Element for page 2 has .pager__item class.');
+    $this->assertTrue($elements[1]->a, 'Link to page 2 found.');
 
-    $this->assertClass($elements[2], 'pager-item', "Element for page 3 has .pager-item class.");
-    $this->assertTrue($elements[2]->a, "Link to page 3 found.");
+    $this->assertClass($elements[2], 'pager__item', 'Element for page 3 has .pager__item class.');
+    $this->assertTrue($elements[2]->a, 'Link to page 3 found.');
 
-    $this->assertClass($elements[3], 'pager-next', "Element for next page has .pager-next class.");
-    $this->assertTrue($elements[3]->a, "Link to next page found.");
+    $this->assertClass($elements[3], 'pager__item-next', 'Element for next page has .pager__item-next class.');
+    $this->assertTrue($elements[3]->a, 'Link to next page found.');
 
-    $this->assertClass($elements[4], 'pager-last', "Element for last page has .pager-last class.");
-    $this->assertTrue($elements[4]->a, "Link to last page found.");
+    $this->assertClass($elements[4], 'pager__item-last', 'Element for last page has .pager__item-last class.');
+    $this->assertTrue($elements[4]->a, 'Link to last page found.');
 
     // Navigate to next page.
-    $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager-next'));
+    $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager__item-next'));
     $this->clickPreviewLinkAJAX($elements[0]['href'], 5);
 
     // Test that the pager is present and rendered.
-    $elements = $this->xpath('//ul[@class = "pager"]/li');
+    $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items'));
     $this->assertTrue(!empty($elements), 'Full pager found.');
 
     // Verify elements and links to pages.
     // We expect to find 7 elements: links to '<< first' and '< previous'
     // pages, link to page 1, current page == 2, link to page 3 and links
     // to 'next >' and 'last >>' pages.
-    $this->assertClass($elements[0], 'pager-first', "Element for next page has .pager-first class.");
-    $this->assertTrue($elements[0]->a, "Link to first page found.");
+    $this->assertClass($elements[0], 'pager__item-first', 'Element for first page has .pager__item-first class.');
+    $this->assertTrue($elements[0]->a, 'Link to first page found.');
 
-    $this->assertClass($elements[1], 'pager-previous', "Element for previous page has .pager-previous class.");
-    $this->assertTrue($elements[1]->a, "Link to previous page found.");
+    $this->assertClass($elements[1], 'pager__item-previous', 'Element for previous page has .pager__item-previous class.');
+    $this->assertTrue($elements[1]->a, 'Link to previous page found.');
 
-    $this->assertClass($elements[2], 'pager-item', "Element for page 1 has .pager-item class.");
-    $this->assertTrue($elements[2]->a, "Link to page 1 found.");
+    $this->assertClass($elements[2], 'pager__item', 'Element for page 1 has .pager__item class.');
+    $this->assertTrue($elements[2]->a, 'Link to page 1 found.');
 
-    $this->assertClass($elements[3], 'pager-current', 'Element for current page has .pager-current class.');
-    $this->assertFalse(isset($elements[3]->a), 'Element for current page has no link.');
+    $this->assertClass($elements[3], 'is-active', 'Element for current page has .is-active class.');
+    $this->assertTrue($elements[3]->a, 'Element for current page has link.');
 
-    $this->assertClass($elements[4], 'pager-item', "Element for page 3 has .pager-item class.");
-    $this->assertTrue($elements[4]->a, "Link to page 3 found.");
+    $this->assertClass($elements[4], 'pager__item', 'Element for page 3 has .pager__item class.');
+    $this->assertTrue($elements[4]->a, 'Link to page 3 found.');
 
-    $this->assertClass($elements[5], 'pager-next', "Element for next page has .pager-next class.");
-    $this->assertTrue($elements[5]->a, "Link to next page found.");
+    $this->assertClass($elements[5], 'pager__item-next', 'Element for next page has .pager__item-next class.');
+    $this->assertTrue($elements[5]->a, 'Link to next page found.');
 
-    $this->assertClass($elements[6], 'pager-last', "Element for last page has .pager-last class.");
-    $this->assertTrue($elements[6]->a, "Link to last page found.");
+    $this->assertClass($elements[6], 'pager__item-last', 'Element for last page has .pager__item-last class.');
+    $this->assertTrue($elements[6]->a, 'Link to last page found.');
 
     // Test Mini Pager.
     $this->getPreviewAJAX('test_mini_pager', 'default', 3);
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 71772b3..2a7ded6 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -129,7 +129,7 @@ body,
 ul.contextual-links,
 ul.links,
 ul.primary,
-.item-list .pager,
+.pager__items,
 div.field-type-taxonomy-term-reference,
 div.messages,
 .node__meta,
@@ -277,24 +277,26 @@ table ul.links li {
   font-size: 0.923em;
   text-shadow: 0 0 0 !important;
 }
-.item-list .pager {
+.pager__items {
   font-size: 0.929em;
-}
-.item-list .pager li {
   padding: 10px 15px;
 }
-.item-list .pager a {
+.pager__item a {
   display: inline-block;
 }
-.item-list .pager li.pager-first,
-.item-list .pager li.pager-previous {
+.pager__item.is-active a {
+  color: #3B3B3B;
+  border-bottom: 0;
+}
+.pager__item-first,
+.pager__item-previous {
   padding: 10px 10px 10px 0;
 }
-.item-list .pager li.pager-ellipsis {
+.pager__item-ellipsis {
   padding: 10px 0;
 }
-.item-list .pager li.pager-last,
-.item-list .pager li.pager-next {
+.pager__item-last,
+.pager__item-next {
   padding: 10px 0 10px 10px;
 }
 ul.menu li {
diff --git a/core/themes/seven/css/style.css b/core/themes/seven/css/style.css
index aa78e66..3ed12f6 100644
--- a/core/themes/seven/css/style.css
+++ b/core/themes/seven/css/style.css
@@ -477,21 +477,21 @@ div.submitted {
 
 /**
  * Pagination.
- * The item-list CSS uses quite strong selectors, we have to match them here to
- * override.
  */
-.item-list .pager li {
+.pager__items {
+  margin-bottom: .5em;
+}
+.pager__item {
   display: inline-block;
   color: #8c8c8c;
   font-size: 1.08em;
   padding: 0 0.6em;
   margin: 0;
 }
-.item-list .pager a,
-.item-list .pager .pager-current {
+.pager__item a {
   border-bottom: 2px solid transparent;
   line-height: 1.55em;
-  padding: 0 5px;
+  padding: 0 5px 3px;
   text-decoration: none;
   -webkit-transition: border-bottom-color 0.2s;
   -moz-transition: border-bottom-color 0.2s;
@@ -499,28 +499,24 @@ div.submitted {
   font-weight: 600;
   -webkit-font-smoothing: antialiased;
 }
-.item-list .pager a {
-  padding-bottom: 3px;
-}
-.item-list .pager .pager-current {
+.pager__item.is-active a {
   border-bottom-width: 3px;
   border-bottom-color: #2a678c;
+  padding-bottom: 2px;
   color: #2a678c;
-  margin: 0 5px;
   font-weight: 700;
 }
-.item-list .pager a:focus,
-.item-list .pager a:hover {
+.pager__item a:focus,
+.pager__item a:hover {
   border-bottom-color: #3395d2;
   color: #3395d2;
 }
-.item-list .pager-next a,
-.item-list .pager-last a,
-.item-list .pager-first a,
-.item-list .pager-previous a {
+.pager__item-next a,
+.pager__item-last a,
+.pager__item-first a,
+.pager__item-previous a {
   border-bottom-width: 0;
   color: #2a678c;
-  font-weight: 600;
 }
 
 /**