Change parent div on input[type=checkbox]:checked with css [duplicate]

Question

I can figure out how to make the parent div change when checkbox is checked :( Changing the following paragraph works fine.

Tried this approach without luck in Chrome:

HTML

<div>
    <input type="checkbox" checked>
    <p>Test</p>
</div>

CSS

div {
    background: pink;
    width: 50px;
    height:50px;
}
div + input[type=checkbox]:checked {
  background: green;
}

input[type=checkbox]:checked + p {
    background: blue;
}

http://jsfiddle.net/lajlev/3xUac/

I hate when people mark as duplicate what the question they use and the duplicate doesn't even have an answer or publicly voted up answer. — M H
– M H, Commented Aug 26, 2016 at 4:43
If anyone still search for a solution, this can help: jsfiddle.net/eduardoks98/wv0amod8 — Eduardo Steffens
– Eduardo Steffens, Commented Jan 18, 2022 at 14:35

Community · Accepted Answer · 2017-05-23 12:10:28Z

16

No way to select a parent with CSS only (until CSS4), so you must use JS..

See this post that talking about it here.

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Jun 1, 2012 at 7:42

Val

7628 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

0b10011 Over a year ago

Keep in mind that the new draft uses ! instead of $ to specify the subject of the selector.

Brilliand Over a year ago

This jQuery plugin claims to add the behavior to your stylesheets: demo.idered.pl/jQuery.cssParentSelector

lajlev Over a year ago

I've tried out the jQuery plugin without luck, looking forward to the new CSS4 selector.

Val Over a year ago

Or you can directly use something like lesscss.org for example !

Amir Surnay Over a year ago

i don't think it'll be in CSS4. because it CSS is have cascade style, which means you can climb up, you can just go down

Teocci · Accepted Answer · 2022-05-11 08:48:19Z

8

You cannot access the parent but if you reorganize your html code and make the input and div elements siblings then you can try this:

div {
  background: pink;
  width: 50px;
  height: 50px;
}

div p {
  color: black;
}

input[type=checkbox]:checked+div {
  background: green;
}

input[type=checkbox]:checked+div p {
  background: blue;
  color: white;
}

<input type="checkbox" checked>
<div>
  <p>Test</p>
</div>

external link

edited May 11, 2022 at 8:48

Teocci

9,3751 gold badge71 silver badges56 bronze badges

answered Mar 4, 2015 at 11:21

Ali Tenni

2913 silver badges13 bronze badges

2 Comments

Hanu Over a year ago

<div> <p>Test</p> </div><input type="checkbox" checked> // is this possible ?

Alexis Wilke Over a year ago

@hanu not really, the + defines the next element, there is nothing to access the previous sibling.

Collectives™ on Stack Overflow

Change parent div on input[type=checkbox]:checked with css [duplicate]

2 Answers 2

5 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Linked

Related