Search code examples
htmlcsscolorspagination

How to add permanently active color in paging


My HTML code is like this

<section class="archive-pages">
  <ul>
    <li><a title="Pagina 1" href="virtual-assistants-network">1</a></li>
    <li><a title="Pagina 2" href="virtual-assistants-network-2">2</a></li>
    <li><a title="Pagina 3" href="virtual-assistants-network-3">3</a></li>
    <li><a title="Pagina 4" href="virtual-assistants-network-4">4</a></li>
    <li><a title="Pagina 5" href="virtual-assistants-network-5">5</a></li>
  </ul>
</section>

How can I give active page color to paging item so that it shows the selected page of anchor tag with background color as blue and text as white?


Solution

  • You should include the language, but whatever it is the concept is the same, if you want to apply special stylings give that menu a "active" class. Then create your style like so. If you are using some type of control that builds the paging for you then you will need to manually pull the required info to build it.

    HTML

    <section class="archive-pages">
      <ul>
        <li><a title="Pagina 1" href="virtual-assistants-network">1</a></li>
        <li><a title="Pagina 2" href="virtual-assistants-network-2" class="active">2</a></li>
        <li><a title="Pagina 3" href="virtual-assistants-network-3">3</a></li>
        <li><a title="Pagina 4" href="virtual-assistants-network-4">4</a></li>
        <li><a title="Pagina 5" href="virtual-assistants-network-5">5</a></li>
      </ul>
    </section>
    

    CSS

    .archive-pages a.active{
        color:#FFFFFF;
        background-color:blue
    }