Tengo paginación ¿Cómo puedo cambiar el fondo de pagination__link con el texto "a la izquierda" cuando hago clic en los otros enlaces? Es necesario utilizar solo CSS.

0
MyName 14 nov. 2017 a las 04:43

2 respuestas

La mejor respuesta

Puede hacer esto, pero, francamente, es complicado usar CSS cajas flexibles junto con la pseudoclase :focus-within relativamente nueva. Esto requiere invertir el orden de los elementos <li> dentro de <ul> sin embargo:

.pagination {
  /* sets the display to use the flex layout: */
  display: flex;
  /* ensures the contents of the <ul> are shown in
     columns and in reverse-order: */
  flex-direction: column-reverse;
}

/* selects first the <li> that has a focused element
   within it, then finds all subsequent <li> elements,
   using the general-sibling combinator ('~') that
   also matches the :last-child pseudo-class (there can,
   obviously, be only one) then finds the <a> element(s)
   which is a child of that <li> element: */
li:focus-within ~ li:last-child > a {
  background - color: red;
}
<ul class="pagination">
  <li class="pagination__item pagination__item--active">
    <a class="pagination__link" href="#">
      Page 2
    </a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">
      Page 1
    </a>
  </li>
  <li class="pagination__item">
    <a class="pagination__link" href="#">
          left
        </a>
  </li>
</ul>

Demostración de JS Fiddle externa.

Referencias:

1
David says reinstate Monica 14 nov. 2017 a las 02:14
input[name="radio"]{
  display: none;
}
label{
  text-decoration: underline;
  color: blue;
}

input[name="radio"]:checked + label{
  background-color: yellow;
}
<ul class="pagination">
  <li class="pagination__item">
    <input type="radio" id="radio1" name="radio" />
    <label for="radio1">left</label>
    <!--
    <a class="pagination__link" href="#">  
      left
    </a>
    -->
  </li>
  <li class="pagination__item">
    <input type="radio" id="radio2" name="radio" />
    <label for="radio2">Page1</label>
    <!--
    <a class="pagination__link" href="#">
      Page 1
    </a>
    -->
  </li>
  <li class="pagination__item pagination__item--active">
    <input type="radio" id="radio3" name="radio" />
    <label for="radio3">Page1</label>
    <!--
    <a class="pagination__link" href="#">
      Page 2
    </a>
    -->
  </li>
</ul>

Quizás no sea la respuesta lo que quieres.

Pero creo que puede ser una buena pista para tu problema.

Puede utilizar el truco de la casilla de verificación o el truco de la radio.

0
jinongun 14 nov. 2017 a las 01:55