CSS與祖父母定位

在此JSFiddle示例中，僅使用CSS，當.secondChild元素獲得屬性focused="true"時，是否可以定位/設置元素.child？喜歡的東西：CSS與祖父母定位

.grandParent [focused="true"] ...?

這裏是我的HTML：

<div class="grandParent"> 
    <div class="parent"> 
     <div class="child"></div> 
    </div> 
    <div class="parent sibling"> 
     <textarea class="secondChild"></textarea> 
    </div> 
</div>

而且我現在的CSS：

.grandParent { 
    padding: 20px; 
    background: red; 
} 
.parent { 
    padding: 20px; 
    background: blue 
} 
.child { 
    padding: 20px; 
    background: green; 
} 
.secondChild { 
    padding: 20px; 
    background: grey; 
} 
.sibling { 
    padding: 20px; 
    background: orange; 
}

來源

2013-08-20 DRAGON

http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector –

目前沒有辦法做到這一點。你必須使用JS或者改變你的'div'的佈局方式。你可以在'textarea'之後立即放置'

'並執行'.secondChild：focus + .child {}'來實現類似的功能。 – ninty9notout

謝謝各位快速回答。我踢了一個JS getElementById解決方案。 – DRAGON

也許你可以嘗試這樣的事情：http://jsfiddle.net/JTUKC/1/

真誠我不不知道爲什麼這些選擇器不工作

div.grandParent div.parent textarea.secondChild:hover + div.grandParent div.parent div.child { 
    background: pink !important; 
}

來源

2013-08-20 22:31:50

@DRAGON，你可以使用：focus而不是懸停。 –

CSS與祖父母定位

回答

相關問題