英文:
How to add a style if the parent has a sibling with a specific id using only CSS
问题
如果父元素有一个具有ID "message" 的兄弟元素，您可以使用CSS来为输入元素添加边框颜色。以下是相应的CSS代码：
div#message + div input.red {
border-color: your-border-color;
}
请将 "your-border-color" 替换为您想要的边框颜色值。这段CSS代码将选择具有 "red" 类的输入元素，但仅当其父元素的下一个兄弟元素是具有ID "message" 的div时才会应用边框颜色。
英文:
Given this code below, how can I add a border color in the input element if the parent has a sibling with this ID "message"?
<div>
<input class="red"/>
</div>
<div id="message">
Error message
</div>
I can't use JS in this case, only CSS. Thank you.
答案1
得分: 2
你可以使用 :has 与选择器 div:has( + div#message) > input：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
div:has( + div#message) > input {
border: solid 2px red;
}
<!-- language: lang-html -->
<div>
<input class="red" />
</div>
<div id="message">
错误消息
</div>
<!-- end snippet -->
英文:
You could use :has with the selector div:has( + div#message) > input:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
div:has( + div#message) > input {
border: solid 2px red;
}
<!-- language: lang-html -->
<div>
<input class="red" />
</div>
<div id="message">
Error message
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论