Changing selectors properties CSS

Question

Is it possible in CSS to change a selector properties with another one?

For example, with .button:focus I want to change the background of the body, something like this:

body {
  background-image: url(../images/banana.jpg);
  transition: background-image 2s;
}

.button:focus, body {
  background-image: url(../images/apple.jpg)<-- but I just want to change the background of the body, not from the button also
  transition: background-image 2s;
}

Are you trying to change body background when the focus is on a button? That selector doesn't do that. It applies the property to both a button with focus and body. — Harry, Aug 08 '14 at 14:11
Not in the way you think: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector you will need to either use JS or rethink your approach — SW4, Aug 08 '14 at 14:11

score 0 · Answer 1 · edited Aug 08 '14 at 14:31

0

You want to use JavaScript to do that, or an efficient CSS cascading of selectors, but it won't work bottom up as you wrote.

edited Aug 08 '14 at 14:31

Zistoloen

888
13
29

answered Aug 08 '14 at 14:11

Luca

7,571
5
41
56

score 0 · Answer 2 · answered Aug 08 '14 at 14:17

0

you can use Jquery for it.Because by using Jquery you can change one's property by the event of other element. And it is lot more easier than other methods.

answered Aug 08 '14 at 14:17

Ajit Singh

380
3
14

score 0 · Accepted Answer · answered Aug 08 '14 at 14:21

No.

(Sorry)

CSS has no way of ascending the DOM, this is not how it works - as such any element which is a child of the body, such as a button, cannot traverse and style the body using a CSS selector.

There are therefore 2 ways you can do this:

Use javascript to add/alter the styling of the body on the button click
Have an absolutely positioned, width/height 100% top left:0 div overlayed on the body, then do, e.g:

Demo Fiddle

HTML

<button>Click me!</button>
<div></div>

CSS

html, body, div {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    position:relative;
}
body {
    background:grey;
}
div {
    display:none;
    background:red;
    position:absolute;
    left:0;
    top:0;
}
button {
    z-index:1;
    position:relative;
}
button:focus + div {
    display:block;
    z-index:0;
}

However, it is likely this will not work in a production environment due to the various dependencies required to make this work, thus making the first solution preferable.

Changing selectors properties CSS

3 Answers3

No.

Demo Fiddle