Css selector: first/last-of-type and has another class

Question

In a simple pager I'm building I need to apply specific style to the current page if the current page is the first or the last page. And I don't know how to use the :first-of-type/ :last-of-type selector in addition to the normal 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'd like something like #myPages .page-number:first-of-type.current-page but it does not work because of the something-else and another-one div.

In my jsFiddle for example, I'd like the '1' to be blue.

Thanks for your help.

[edit] I've updated the fiddle, I think it's the best way to get my idea :)

Pseudo-classes select elements, not classes of elements. Adding a class to the mix makes it act more like a filter and it then becomes more restrictive. — j08691, Jun 06 '17 at 13:57
yes, but I don't think it exists a `last-of-class` feature in CSS — Valentin Coudert, Jun 06 '17 at 14:00
Please check to see if it helps: https://jsfiddle.net/bd21cxab/2/ — Gerard, Jun 06 '17 at 14:03
I've updated my fiddle so you get the idea because what you suggest unfortunately doesn't work — Valentin Coudert, Jun 06 '17 at 14:08
@Valentin Coudert: Sounds like you've answered your own question, then, since you know no such feature exists? — BoltClock, Jun 06 '17 at 14:29
(I meant the `last-of-class` selector and was hoping for a way of achieving the same result with a combination of other selectors) — Valentin Coudert, Jun 06 '17 at 14:36

reinierkors · Answer 1 · 2017-06-06T14:22:07.683

-1

UPDATE: As the post author has changed their question, I've updated my answer:

#explain {
  margin-bottom: 20px;
}

#myPages .something-else+.current-page {
  color: blue;
}

#myPages div:nth-last-child(2) {
  color: red;
}

<div id="explain">
  Please note:<br> - there will be only one 'page-number' with 'current-page' in my app<br> - I don't know in advance how many pages there will be (so nth-child cannot work)
</div>
<div id="myPages">
  <div class="something-else"></div>
  <div class="page-number current-page">1 - Should be blue because it is the first page-number <strong>and</strong> it has the current-page class</div>
  <div class="page-number">2</div>
  <div class="page-number current-page">3 - Nothing should happen</div>
  <div class="page-number current-page">4 - Should be red because it is the last page-number <strong>and</strong> it has the current-page class</div>
  <div class="another-one"></div>
</div>

edited Jun 06 '17 at 14:22

answered Jun 06 '17 at 14:04

reinierkors

507
6
19

I don't think this does what he wants, as your selectors aren't selecting nth-of-items-with-this-class, but items with this class which are also the nth child of their parent, regardless of class. Hence 1 being colored blue instead of 2. – Nathan Arthur Jun 06 '17 at 14:08
I don't know the number of page in advance, and I don't where the `current-page` will be – Valentin Coudert Jun 06 '17 at 14:09
@ValentinCoudert, I've updated my answer. Is this what you're looking for? – reinierkors Jun 06 '17 at 14:22

Css selector: first/last-of-type and has another class

1 Answers1