選擇：內部容器

從以前的元素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

選擇：內部容器

回答

相關問題