英文:
Override a CSS Style for previous sibling using CSS only
问题
我希望将红色应用于div1，如果div2存在，否则应用黄色 -
.parentdiv:has(.div2) .div1 {
color: red;
}
.parentdiv:not(:has(.div2)) .div1 {
color: yellow;
}
请注意，:has选择器在某些浏览器中可能不被支持，这只是一种近似的方法。
英文:
I have some html like this -
<div class="parentdiv">
<div class="div1"></div>
<div class="div2"></div>
<div>
i want to apply red color to div1 if div2 exists else apply yellow -
.div1 {
color:red;
}
.div1 {
color:yellow;
}
How can i do it via CSS only? I know we have the sibling selectors but there is no previous sibling selector and in my case i'm looking for something similar - :has does not have support for all browsers.
答案1
得分: 1
根据您的要求，我的回答基于我的理解：
- 如果
.div1后面跟着.div2，那么.div1应该是红色的 - 否则
.div1应该是黄色的
您可以只使用 CSS 来实现，但前提是浏览器支持现代的 :has 选择器:
.div1 {
color: yellow;
}
/* 仅当`.div1`紧接着被`.div2`跟着时为其单独设置样式 */
.div1:has(+ .div2) {
color: red;
}
这将适用于以下任何情况：
<div>
<div class="div1"></div> <!-- 显示为红色 -->
<div class="div2"></div>
</div>
<div>
<div class="div1"></div> <!-- 显示为黄色 -->
</div>
<div>
<div>任何`.div1`之前的虚拟元素</div>
<div class="div1"></div> <!-- 显示为红色 -->
<div class="div2"></div>
<div>任何`.div2`之后的虚拟元素</div>
</div>
<div>
<div>任何`.div1`之前的虚拟元素</div>
<div class="div1"></div> <!-- 显示为黄色 -->
<div>任何`.div1`之后的虚拟元素</div>
</div>
查看下面的概念验证：
<!-- 此处为代码示例 -->
如果您不想使用 :has，您可以使用 :only-child 解决方案，但这仅适用于.div1是元素的唯一子元素的情况。如果在.div1之前或.div2之后有任意的 DOM 元素，则此方法不起作用：
<!-- 此处为另一个代码示例 -->
希望以上信息对您有所帮助。
英文:
My answer is based on my interpretation of your requirement:
- If
.div1is followed by.div2, then.div1should be red - Otherwise
.div1should be yellow
You can do that with CSS only, but with the pre-requisite that the browser supports the modern :has selector:
.div1 {
color: yellow;
}
/* Style div1 separately if it is followed immediately by .div2 */
.div1:has(+ .div2) {
color: red;
}
This will work for any for the following scenarios:
<div>
<div class="div1"></div><!-- Appears red -->
<div class="div2"></div>
</div>
<div>
<div class="div1"></div><!-- Appears yellow -->
</div>
<div>
<div>Any dummy element before</div>
<div class="div1"></div><!-- Appears red -->
<div class="div2"></div>
<div>Any dummy element after</div>
</div>
<div>
<div>Any dummy element before</div>
<div class="div1"></div><!-- Appears yellow -->
<div>Any dummy element after</div>
</div>
See proof-of-concept below:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
.div1 {
color: yellow;
}
.div1:has(+ .div2) {
color: red;
}
/* START: For presentation only */
.parentdiv {
background-color: #333;
color: #fff;
padding: 1rem;
margin: 1rem;
}
/* END: For presentation only */
<!-- language: lang-html -->
<div class="parentdiv">
<div class="div1">div1</div><!-- Appears red -->
<div class="div2">div2</div>
</div>
<div class="parentdiv">
<div class="div1">div1</div><!-- Appears yellow -->
</div>
<div class="parentdiv">
<div>Any dummy element before</div>
<div class="div1">div1</div><!-- Appears red -->
<div class="div2">div2</div>
<div>Any dummy element after</div>
</div>
<div class="parentdiv">
<div>Any dummy element before</div>
<div class="div1">div1</div><!-- Appears yellow -->
<div>Any dummy element after</div>
</div>
<!-- end snippet -->
If you do not want to use :has, you can use the :only-child solution but this only works if .div1 is the ONLY child of the element. This will not work if you have arbitrary DOM elements occurring before .div1 or after .div2:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
.div1 {
color: red;
}
.div1:only-child {
color: yellow;
}
/* START: For presentation only */
.parentdiv {
background-color: #333;
color: #fff;
padding: 1rem;
}
/* END: For presentation only */
<!-- language: lang-html -->
<div class="parentdiv">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
<hr />
<div class="parentdiv">
<div class="div1">div1</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论