CSS Selector Not Working (~)

Question

I am learning CSS and was trying to figure out a way to make the background color of the body change as you hover over the header element on the page. I have tried to use every selector and it just doesn't work! Can anyone help me figure out my problem? Here is my code:

<html>

 <style>


  #header {
   text-align: center;
   position: relative;
  }

  #header:hover ~ .body{
   background-color: blue;
  }

  .body{
   background-color: purple;
  }


 </style>

 <body class="body">

  <div id="header">
   <font size="16">My Header</font>
  </div>

 </body>

</html>

`body class="body"` I'm just curious why? – Roko C. Buljan Sep 17 '15 at 00:44 — Roko C. Buljan, Sep 17 '15 at 00:44

score 6 · Answer 1 · edited May 23 '17 at 12:19

In the code you have, what you are trying to do, in essence, is select a parent element.

In other words, body is the parent of div#header, and you are trying to select body on hover of its child.

In CSS, there is no way to select the parent of an element. CSS doesn't work that way.

You can read more about this restriction here: Is there a CSS parent selector?

The selector you are trying to use (~) is called a general sibling selector and it matches elements that share the same parent.

Read more about it here: General sibling selectors on MDN.

If you really want to select a parent element you can look into a Javascript / jQuery solution.

For some interesting reading as to why there is no parent selector in CSS, visit: Parent Selectors in CSS on CSS-Tricks.

For a complete list of CSS Selectors, visit: W3C Selectors Level 3.

Impossible in CSS? Fair enough. jQuery? Of course it has a `.parent()` which you can simply `.addClass()` to. — boxspah, Sep 17 '15 at 00:46
You don't need JS, jQuery. Only using the right elements and selectors. — Roko C. Buljan, Sep 17 '15 at 00:54

Roko C. Buljan · Accepted Answer · 2015-09-17T00:56:09.380

You cannot target a parent element using CSS (a quick Goog search would have told you that)

but what you can do

place a full-size transparent element right after your #header.
On #header hover target that element using + (immediate next sibling selector) and
change that element background from transparent to blue:

body{
  background-color: purple;
}
#header {
  text-align: center;
  position: relative;
}
#underlay{
  position: fixed;
  top:0; left:0; bottom:0; right:0;
  z-index: -1;         /* make it underlay other elements!! */
  background: transparent;
}
#header:hover + #underlay{
  background: blue;
}

<div id="header">
   <h1>My Header</h1>
</div>

<div id="underlay"></div>

You could also [use a pseudo element](https://jsbin.com/fadoko/edit?html,css,output) (as long as the body height is 100%) — misterManSam, Sep 17 '15 at 01:52

Rachel Gallen · Answer 3 · 2015-09-17T01:00:50.937

0

Bit of a workaround but you could try this

#bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background:#fff;
}

#header {
    height: 100px;
    position:fixed;
    top: 0px;
    width:100%;
    background: red;
    z-index: 2;
}

#header:hover ~ #bg {
    background: yellow;
}

<div id="header"></div>

<div id="bg">
</div>

edited Sep 17 '15 at 01:00

answered Sep 17 '15 at 00:24

Rachel Gallen

25,819
19
69
75

If I were to do body:hover it would change when I hovered over the body, but I do not want that. I want the body background to change when I hover over the header, hence the selector. – Jake Sep 17 '15 at 00:26
2

This works as requested, but as usual... People ask for something then down vote before expanding in detail what they want – Angry 84 Sep 17 '15 at 00:53

Kadeem L · Answer 4 · 2015-09-17T00:33:53.897

-1

Nearly there, try this.

body{
   background-color: purple;
  margin:0;
  padding:0;
  }

#header {
   text-align: center;
  padding:5px;
   position: relative;
  cursor:pointer;
  }

  #header:hover {
   background-color: blue;
  }

#header a{
  font-size:26px;
}

<body>

  <div id="header">
   <a>My Header</a>
  </div>

 </body>

UPDATE: You can implement this via a pseudo element:

body   {  background: purple;}

.bg {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


a{
  font-size:40px;
  text-align:center;
}


.menu div:first-child:hover ~ .bg {
  background: blue;
  
}

<div class="menu">
  <div><a>My Header</a></div>

  <div class="bg"></div>
</div>

edited Sep 17 '15 at 00:33

answered Sep 17 '15 at 00:12

Kadeem L

813
4
16
29

I believe you misunderstood my question. I don't want to change the background color of the header, but of the body. – Jake Sep 17 '15 at 00:20
How about providing some information about the issue and your solution? – Felix Kling Sep 17 '15 at 00:30
*Pseudo element?* where's that pseudo element? – Roko C. Buljan Sep 17 '15 at 00:34
Using the first-child no? Or am I missing something? – Kadeem L Sep 17 '15 at 00:42

Tyler Lazenby · Answer 5 · 2015-09-17T01:07:46.970

Demo of what I think you are looking for

/* Initial Styling of CSS style, note that there is a DOM
element "header" so you don't have to use a div with an ID
of "header" */
 header {
   background-color: black;
   color: white;
   padding: 1px 0;
   cursor: pointer;
   text-align: center;
 }
/* This is where you back the changable element. */
.background {
  background-color: red;
  display: fixed;
  width: 100%;
  /* You can make a Javascript code to see what the length of 
  the webpage is but for now let's just say the page is 500
  px long.*/
  height: 500px;
  transition: .3s;
  /* This is so that it can't be selected and will act exactly
  like a background */
  z-index: -1;
}
/* This is where the magic starts. The body is not able to be
selected as it is the parent of the element that you want to 
hover over. However you can select the element NEXT to or as a 
CHILD of the trigger element. */
header:hover + .background {
  background-color: yellow;
}

<header>
  <h1>Hover Here</h1>
  <h2>Background will change from red to yellow and then back again</h2>
</header>
<!--Make sure to put the div after ALL elements so that it doesn't cover them up-->
<div class="background"></div>

CSS Selector Not Working (~)

5 Answers5

but what you can do