When creating a simple pager, I encountered the need to apply specific styles to the current page if it happens to be either the first or last page. However, I am unsure how to incorporate the :first-of-type/:last-of-type selector along with the usual class selector.
<div id="myPages">
<div class="something-else"></div>
<div class="page-number current-page">1</div>
<div class="page-number">2</div>
<div class="page-number">3</div>
<div class="another-one"></div>
</div>
I attempted using
#myPages .page-number:first-of-type.current-pagesomething-else and another-one div elements.
In order to achieve the desired outcome, check out my updated jsFiddle example, where I aim to make the '1' text appear in blue for the current page.
Thank you for your assistance.
[edit] I have made further updates to the fiddle to clarify my intention :)