Css選擇器：第一個/最後一個類型，並有另一個類

在一個簡單的尋呼機我正在建設中，如果當前頁面是第一頁或最後一頁，我需要將特定樣式應用於當前頁面。除了普通的類選擇器之外，我不知道如何使用:first-of-type/:last-of-type選擇器。Css選擇器：第一個/最後一個類型，並有另一個類

<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'是藍色的。

感謝您的幫助。

[編輯]我已經更新了小提琴，我認爲這是把我的想法:)最好的辦法

來源

2017-06-06 Valentin Coudert

僞類選擇元素，而不是類元素。向組合中添加一個類使其更像一個過濾器，然後變得更加嚴格。 – j08691

是的，但我認爲它不存在CSS –

中的'last-of-class'功能請檢查是否有幫助：https://jsfiddle.net/bd21cxab/2/ – Gerard

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

來源

2017-06-06 14:04:01 reinierkors

我不認爲這是他想要的，因爲您的選擇器沒有選擇與此類別相關的第n項目，而是具有此類別的項目，其也是他們父母的第n個孩子，不管其類別如何。因此，1是藍色的而不是2。 –

我不知道頁面的數量，並且我不會在'current-page'的位置 –

@ValentinCoudert，我已經更新了我的答案。這是你在找什麼？ – reinierkors

Css選擇器：第一個/最後一個類型，並有另一個類

回答

相關問題