Selecting children of a sibling

Hi,
is it possible to select the child element of a sibling with CSS if sibling is specified with class or id (not adjacent sibling)?
I would like to hide the children of element 1 while hovering over element 2. Element 1 and 2 are siblings. It would look like a drop down menu with first sub list visible by default.
I’m sorry if this question has been here before but I couldn’t find it anywhere. I’m not an expert on CSS and Javascript.

Welcome to SitePoint Forums! :cool:

No, you can’t do that, I’m afraid. You need to use JavaScript for this.

Hi,

You could select a general sibling but I don’t think this is anything like what you were asking though :slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#target, #test p {
    background:red
}
#target:hover ~ #test p {
    visibility:hidden;
}
</style>
</head>
<body>
<div>test</div>
<div id="target">Hide</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div id="test">
    <p>Me</p>
</div>
<div>test</div>
<div>test</div>
<div>test</div>
</body>
</html>


Doesn’t work in Safari or ie6 though.