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选择器：第一个/最后一个类型，并有另一个类

回答

相关问题