英文:
css conditional styling based on number of elements
问题
在我的React.js项目中，有一个块可能会在运行时具有一个元素或两个元素，具体取决于运行时情况。
例如：
情景1：(存在两个组)
<div class='menu-list'>
<div class='group'>
<div class="option">....</div>
</div>
<div class='group'>
<div class="option">....</div>
</div>
</div>
情景2：(仅有一个组)
<div class="menu-list">
<div class='group'>
<div class="option">....</div>
</div>
</div>
原本我已经准备好了CSS样式。然而，我注意到在运行时有时会出现情景2，我不想在这种情况下应用任何样式。
我想只在情景1下为元素设置样式。
.menu-list .group:first-child .option:last-child { .....}
这是否可能？
英文:
In my react js project
There is a block which may have one element or two elements, depending on run time.
For example:
Scenario 1: (two groups are existed )
<div class='menu-list'>
<div class='group'>
<div class="option">....</div>
</div>
<div class='group'>
<div class="option">....</div>
</div>
</div>
Scenario 2: (only 1 group)
<div class="menu-list">
<div class='group'>
<div class="option">....</div>
</div>
</div>
Original I have my css styling ready. However, I noticed there exist scenario 2 sometimes in run time and I dont want to apply any styling in this situation.
I would like to style the element only when it is in scenario 1.
.menu-list .group:first-child .option:last-child { .....}
If it is possible to do so?
答案1
得分: 1
如果您只有这两种情况：当它是一个元素时，应用一种特定的样式，当它是多个元素时，应用另一种样式，那么这对您来说应该是适用的。
.group {
color: green;
}
.group:first-child:last-child {
color: red;
}
或者，如果您只需要为第一种情况（多个元素）设置样式：
.group:not(:first-child:last-child) {
color: green;
}
正如@AmauryHanser所建议的，使用 :only-child 更为正确：
.group:not(:only-child) {
color: green;
}
以上是您提供的CSS样式代码的翻译。
英文:
If you only have these two scenarios: when it's one element you apply one specific style, when it's multiple elements you apply another style, this should be for you.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.group {
color:green;
}
.group:first-child:last-child {
color:red;
}
<!-- language: lang-html -->
<div class='menu-list'>
<div class='group'>
<div class="option">If the element is not alone, it's green</div>
</div>
<div class='group'>
<div class="option">If the element is not alone, it's green</div>
</div>
</div>
---
<div class="menu-list">
<div class='group'>
<div class="option">If it's alone it's red</div>
</div>
</div>
<!-- end snippet -->
Or, if you only need to style for the first scenario (multiple elements)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.group:not(:first-child:last-child) {
color:green;
}
<!-- language: lang-html -->
<div class='menu-list'>
<div class='group'>
<div class="option">If the element is not alone, it's green</div>
</div>
<div class='group'>
<div class="option">If the element is not alone, it's green</div>
</div>
</div>
---
<div class="menu-list">
<div class='group'>
<div class="option">If it's the only element, I don't apply the style</div>
</div>
</div>
<!-- end snippet -->
As rightly suggested by @AmauryHanser, using :only-child is more correct
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.group:not(:only-child) {
color:green;
}
<!-- language: lang-html -->
<div class='menu-list'>
<div class='group'>
<div class="option">If the element is not alone, it's green</div>
</div>
<div class='group'>
<div class="option">If the element is not alone, it's green</div>
</div>
</div>
---
<div class="menu-list">
<div class='group'>
<div class="option">If it's the only element, I don't apply the style</div>
</div>
</div>
<!-- end snippet -->
答案2
得分: 0
根据答案和调整，
这个逻辑达到了目标。
.group:not(:only-child):first-child .option:last-child{
颜色：绿色；
}
谢谢大家。
英文:
Based on the answers and adjustment,
this logic gets to the target.
.group:not(:only-child):first-child .option:last-child{
color:green;
}
Thank you all
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论