[英]Hide all except first child of an element using pure css
I am trying to hide every other child after first child of classa class element. 我试图在classa类元素的第一个孩子之后隐藏所有其他孩子。
div.classa { display:none; } div.classa:first-child { display:block !important; }
<div class="content"> <h3>abc</h3> <div class="classa">some content</div> <h3>xyz</h3> <div class="classa">more content</div> <h3>header3</h3> <div class="classa">another content</div> </div>
How to achieve this using pure css. 如何使用纯css实现这一目标。
Check out here https://jsfiddle.net/32vw04jg/1/ 点击这里https://jsfiddle.net/32vw04jg/1/
<div class="content">
<div>
<h3>abc</h3>
<div class="classa">some content</div>
</div>
<div>
<h3>xyz</h3>
<div class="classa">more content</div>
</div>
<div>
<h3>header3</h3>
<div class="classa">another content</div>
</div>
</div>
.content > div:not(:first-child) {
display: none;
}
If you want to support IE8 , then your only option is general sibling selector : 如果你想支持IE8 ,那么你唯一的选择是通用兄弟选择器 :
div.classa ~ .classa { display: none; }
<div class="content"> <h3>abc</h3> <div class="classa">some content</div> <h3>xyz</h3> <div class="classa">more content</div> <h3>header3</h3> <div class="classa">another content</div> </div>
The problem in your code is that you want to hide the first .classa
, but the first .classa
isn't the first child in .content
, the h3
is the first child. 您的代码中的问题是您要隐藏第一个
.classa
,但第一个.classa
不是.content
的第一个子项, h3
是第一个子项。
So as an alternative to the :not()
pseudo class, you could use nth-of-type(n+2)
. 因此,作为
:not()
伪类的替代,您可以使用nth-of-type(n+2)
。 It will select all elements with the same type, except the first one. 它将选择具有相同类型的所有元素,第一个除外。
div.classa:nth-of-type(n+2) { display:none; }
<div class="content"> <h3>abc</h3> <div class="classa">some content</div> <h3>xyz</h3> <div class="classa">more content</div> <h3>header3</h3> <div class="classa">another content</div> </div>
You can do it like that: 你可以这样做:
<div class="content">
<h3>abc</h3>
<div class="classa">some content1</div>
<h3>xyz</h3>
<div class="classa">more content2</div>
<h3>header3</h3>
<div class="classa">another content3</div>
</div>
Css: CSS:
.content > .classa:not(:nth-of-type(2)) {
display:none;
}
You can try the :not
pseudo class — https://developer.mozilla.org/en-US/docs/Web/CSS/:not 您可以尝试
:not
pseudo class - https://developer.mozilla.org/en-US/docs/Web/CSS/:not
See this answer 看到这个答案
If I can understand correctly the question the goal here is to hide every child ( h3
and div.classa
) with the exception of the first h3
and the div.classa
next to it. 如果我能正确理解这个问题,那么这里的目标是隐藏每个孩子(
h3
和div.classa
),除了第一个h3
和它旁边的div.classa
。
The easiest way to accomplish it is a combination of the :first-of-type
and the ~
(general siblings) selectors. 实现它的最简单方法是
:first-of-type
和~
(一般兄弟)选择器的组合。
div.classa:first-of-type ~ * { display:none; }
<div class="content"> <h3>abc</h3> <div class="classa">some content</div> <h3>xyz</h3> <div class="classa">more content</div> <h3>header3</h3> <div class="classa">another content</div> </div>
.content > *{ display: none;}
.content > *:first-child{ display: block !important; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.