Selecting children of a sibling

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.


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" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#target, #test p {
#target:hover ~ #test p {
<div id="target">Hide</div>
<div id="test">

Doesn’t work in Safari or ie6 though.