本文翻译自:Can CSS detect the number of children an element has?
I'm probably answering my own question, but I'm extremely curious. 我可能在回答自己的问题,但我很好奇。
I know that CSS can select individual children of a parent, but is there support to style the children of a container, if its parent has a certain amount of children. 我知道CSS可以选择父级的各个子级,但是如果其父级有一定数量的子级,则可以支持样式化容器的子级。
for example 例如
container:children(8) .child {
//style the children this way if there are 8 children
}
I know it sounds weird, but my manager asked me to check it out, haven't found anything on my own so I decided to turn to SO before ending the search. 我知道这听起来很奇怪,但是我的经理要求我检查一下,自己还没有找到任何东西,因此我决定在结束搜索之前转向SO。
#1楼
参考:https://stackoom.com/question/AAIb/CSS可以检测元素包含的子级数目吗
#2楼
NOTE: This solution will return the children of sets of certain lengths, not the parent element as you have asked. 注意:此解决方案将返回某些长度的子集,而不是您要求的父元素。 Hopefully, it's still useful. 希望它仍然有用。
Andre Luis came up with a method: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Unfortunately, it only works in IE9 and above. Andre Luis提出了一种方法: http : //lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/不幸的是,它仅在IE9及更高版本中有效。
Essentially, you combine :nth-child() with other pseudo classes that deal with the position of an element. 本质上,您将:nth-child()与其他处理元素位置的伪类组合在一起。 This approach allows you to specify elements from sets of elements with specific lengths . 这种方法允许您从具有特定长度的元素集中指定元素。
For instance :nth-child(1):nth-last-child(3)
matches the first element in a set while also being the 3rd element from the end of the set. 例如:nth-child(1):nth-last-child(3)
匹配集合中的第一个元素,同时也是集合末尾的第三个元素。 This does two things: guarantees that the set only has three elements and that we have the first of the three. 这有两件事:确保集合仅包含三个元素,并且我们拥有三个元素中的第一个。 To specify the second element of the three element set, we'd use :nth-child(2):nth-last-child(2)
. 要指定三个元素集的第二个元素,我们将使用:nth-child(2):nth-last-child(2)
。
Example 1 - Select all list elements if set has three elements: 示例1-如果set具有三个元素,则选择所有列表元素:
li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
width: 33.3333%;
}
Example 1 alternative from Lea Verou: Lea Verou的示例1替代方案 :
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}
Example 2 - target last element of set with three list elements: 示例2-使用三个列表元素定位set的最后一个元素:
li:nth-child(3):last-child {
/* I'm the last of three */
}
Example 2 alternative: 示例2的替代方法:
li:nth-child(3):nth-last-child(1) {
/* I'm the last of three */
}
Example 3 - target second element of set with four list elements: 示例3-使用set的第二个元素作为目标,其中包含四个列表元素:
li:nth-child(2):nth-last-child(3) {
/* I'm the second of four */
}
#3楼
Clarification: 澄清:
Because of a previous phrasing in the original question, a few SO citizens have raised concerns that this answer could be misleading. 由于原始问题的先前措辞,一些SO公民提出了对此答案可能产生误解的担忧。 Note that, in CSS3, styles cannot be applied to a parent node based on the number of children it has. 请注意,在CSS3中,无法根据样式的子级数将样式应用于父节点 。 However, styles can be applied to the children nodes based on the number of siblings they have. 但是, 可以根据子节点具有的兄弟节点数将样式应用于子节点。
Original answer: 原始答案:
Incredibly, this is now possible purely in CSS3. 令人难以置信的是,现在这完全可以在CSS3中实现。
/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
width: 100%;
}
/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
}
The trick is to select the first child when it's also the nth-from-the-last child. 诀窍是在第一个孩子也是第n个孩子时选择第一个孩子。 This effectively selects based on the number of siblings. 这有效地根据兄弟姐妹的数量进行选择。
Credit for this technique goes to André Luís (discovered) & Lea Verou (refined). 这种技术值得称赞的是AndréLuís(已发现)和Lea Verou(已提炼)。
Don't you just love CSS3? 您不只是喜欢CSS3吗? 😄 😄
CodePen Example: CodePen示例:
Sources: 资料来源:
- http://andr3.net/blog/post/142 (André Luís) http://andr3.net/blog/post/142 (安德烈·路易斯)
- http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ (Lea Verou) http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/(Lea Verou)
#4楼
Working off of Matt's solution, I used the following Compass/SCSS implementation. 基于Matt的解决方案,我使用了以下Compass / SCSS实现。
@for $i from 1 through 20 {
li:first-child:nth-last-child( #{$i} ),
li:first-child:nth-last-child( #{$i} ) ~ li {
width: calc(100% / #{$i} - 10px);
}
}
This allows you to quickly expand the number of items. 这使您可以快速扩展项目数。
#5楼
If you are going to do it in pure CSS (using scss) but you have different elements/classes inside the same parent class you can use this version!! 如果要使用纯CSS(使用scss)进行此操作,但在同一父类中具有不同的元素/类,则可以使用此版本!
&:first-of-type:nth-last-of-type(1) {
max-width: 100%;
}
@for $i from 2 through 10 {
&:first-of-type:nth-last-of-type(#{$i}),
&:first-of-type:nth-last-of-type(#{$i}) ~ & {
max-width: (100% / #{$i});
}
}
#6楼
No, there is nothing like this in CSS. 不,CSS中没有类似的东西。 You can, however, use JavaScript to calculate the number of children and apply styles. 但是,您可以使用JavaScript计算子级数并应用样式。