选择：内部容器

从以前的元素pseude元素之后我有一个给定的HTML代码，我不能修改：选择：内部容器

<div> 
    <input type="text" id="name" /> 
</div>

使用CSS我输入（后不输入字段工作）后添加一个标签：

div:after { 
    content:'label' 
}

现在我想只根据输入字段来修改标签，我如何选择：after元素？

input.error + * { 
    color: red; 
}

不幸的是，我不能使用JavaScript，只有CSS！

来源

2017-02-20 Vos

不可能的，你不能在CSS使用兄弟选择去了DOM。您只能影响位于兄弟选择器左侧的元素之后的元素 - 之前不会。 –

我相信你想要做的事是不可能的，没有添加html元素或使用jquery。

来源

2017-02-20 17:30:33

目前没有办法使用CSS设计父元素的样式。
您可以随时使用js/jquery来设计父级样式。
$('input').parent();

然而，在未来将有:has()伪类，所以造型家长会是这个样子：
div:has(>input)，这将选择包含一个孩子<input>所有div。

如果你不想为此使用JavaScript。然后你将不得不改变HTML。
使div为输入字段的兄弟可以使用兄弟组合器：
+将只选择相邻的兄弟，而~将寻找任何兄弟。
我想指出的是，不可能看到以前的兄弟姐妹。

检查这个演示：

input ~ div { 
 
    background-color: green; 
 
} 
 

 
input + div { 
 
    color: white; 
 
}

<div>div not selected</div> 
 
<input type="text" id="name" /> 
 
<div>div selected by both sibling combinators</div> 
 
<div>div selected only by the general sibling combinator</div> 
 
<div>selected also only by the general sibling combinator</div>

来源

2017-02-20 18:02:18 pol

感谢您的陈述。不幸的是，这是一个外部提供的HTML sniplet，我无法改变它，也没有使用JavaScript。只允许造型。 – Vos

选择：内部容器

回答

相关问题