-1

Trying to get my CSS to set the height of an element based on whether a radio button is checked. In the code I've commented the lines that work and don't work. What am I doing wrong?

article { height: 12em; } /* Works */
#slide1:checked ~ #slides .inner { margin-left:0; } /* Works */
#slide1:checked ~ #S1 { height: auto; } /* Doesn't Work */
#slide2:checked ~ #slides .inner { margin-left:-100%; } /* Works */
#slide2:checked ~ #S2 { height: auto; } /* Doesn't Work */
#slide3:checked ~ #slides .inner { margin-left:-200%; } /* Works */
#slide3:checked ~ #S3 { height: auto; } /* Doesn't Work */
#slide4:checked ~ #slides .inner { margin-left:-300%; } /* Works */
#slide4:checked ~ #S4 { height: auto; } /* Doesn't Work */
Kuuchuu
  • 326
  • 1
  • 4
  • 13
  • 3
    Need to see your html as well. – Sean Stopnik May 25 '15 at 06:51
  • @SeanStopnik will this work: http://i913.photobucket.com/albums/ac340/Tllc62/codesegment_zpsgqwkatpx.png – Kuuchuu May 25 '15 at 06:54
  • Are you sure the problem isn't `height: auto`? That doesn't always have a meaning. What if you add a border, or a background color? – Kobi May 25 '15 at 06:55
  • @Kobi Even if it doesn't have a meaning, it worked when I manually entered it in dev console. Problem is, css isn't adding the height styling. – Kuuchuu May 25 '15 at 06:57
  • 2
    possible duplicate of [How do I select an element based on the state of another element in the page with CSS?](http://stackoverflow.com/questions/28708741/how-do-i-select-an-element-based-on-the-state-of-another-element-in-the-page-wit) - in short, it's highly dependent on the location of each [ELEM2] in your markup. – BoltClock May 25 '15 at 07:06

1 Answers1

1

You are using the sibling selector in a wrong way. The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

Syntax:

element ~ element { style properties }

HTML:

p ~ span {
  color: red;
}

CSS:

<span>This is not red.</span>

<p>Here is a paragraph.</p>
<code>Here is some code.</code>

<span>And here is a span.</span> //The text will be red in color

In the snapshot you provided for HTML, #S1,#S2,#S3 etc doesn't share the common parents with the inputs and hence the siblings selector will not work here. Modify your html or try it using js.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

More: https://css-tricks.com/child-and-sibling-selectors/

K K
  • 17,794
  • 4
  • 30
  • 39
  • Thanks, I ended up half going with js. I set up some classes in css, then applied/removed classes i js. – Kuuchuu May 25 '15 at 19:15