Cssセレクタ：first/last-of-typeと別のクラスを持っています

Question

私が構築している単純なページャでは、現在のページが最初のページまたは最後のページの場合、特定のスタイルを現在のページに適用する必要があります。また、通常のクラスセレクタに加えて:first-of-type/:last-of-typeセレクタの使用方法はわかりません。

<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> 

私は#myPages .page-number:first-of-type.current-pageのようなものが欲しいのですが、それは理由something-elseとanother-one div要素の動作しません。

たとえば、私のjsFiddleでは、「1」を青色にしたいと思います。

ありがとうございました。

[編集]私はバイオリンを更新しました、私はそれが私の考え:)

Answer 1

UPDATE取得するための最良の方法だと思う：投稿者が自分の質問を変更したようにを、私は私の答えを更新しました：

#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>