Reputation: 730

CSS complex INPUT selector

I have several blocks that look like this:

<div class='templatechoicedesigncss'>
<img src='/images/templatepics/random(100x140).png' />
<p>
   <input type='radio' name='templatechoice' value='random' checked>Random</p>
</div>

Whenever the INPUT field is marked as CHECKED - I need to change CSS to the div with class=templatechoicedesigncss.

But I need to do it through pure CSS only - no javascript, jquery or other triggers. Is that possible?

Upvotes: 0

Answers (3)

user900360

Reputation:

Not possible your way. Check this http://www.w3.org/TR/selectors/#checked

It says...

Radio and checkbox elements can be toggled by the user. Some menu items are "checked" when the user selects them. When such elements are toggled "on" the :checked pseudo-class applies. While the :checked pseudo-class is dynamic in nature, and can altered by user action, since it can also be based on the presence of semantic attributes in the document, it applies to all media. For example, the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes as described in Section 17.2.1 of HTML4, but of course the user can toggle "off" such elements in which case the :checked pseudo-class would no longer apply.

...exactly, word to word.

which basically means you can change dynamically the properties of the what is checked in CSS3 but not it's parent. but oh, it's not fully supported in browsers. other way is to use JS | jQuery | MooTools | YUI etc

Also, BoltClock pointed out that there is no parent selector in CSS; so not possible via only CSS

Upvotes: 0