CSS complex INPUT selector

Question

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?

CSS limitations: en.wikipedia.org/wiki/Cascading_Style_Sheets#Limitations (2nd bullet point) — Said Kaldybaev
– Said Kaldybaev, Commented Mar 24, 2012 at 19:19
Other than asking if there is a parent selector in CSS, which was answered, you aren't telling us what you are trying to do. I'm sure there's a solution. — JohnB
– JohnB, Commented Mar 25, 2012 at 5:29

Alp · Accepted Answer · 2012-03-24 19:20:57Z

2

Not possible without JavaScript.

By the way, a <p> inside a <span> is bad markup, because span's are inline elements and p's are paragraphs.

Also, put the text "Random" inside a <label>.

answered Mar 24, 2012 at 19:20

Alp

29.8k29 gold badges123 silver badges204 bronze badges

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

Comments

sandeep · Accepted Answer · 2012-03-24 19:17:05Z

1

No you can not change parent css with pure CSS.

answered Mar 24, 2012 at 19:17

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Comments

score 0 · Accepted Answer · 2012-03-25 04:04:39Z

0

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

edited Mar 25, 2012 at 4:04

answered Mar 24, 2012 at 21:18

user900360

1 Comment

BoltClock Over a year ago

This has nothing to do with the :checked pseudo-class. It has to do with there being no parent selector in CSS.

Collectives™ on Stack Overflow

CSS complex INPUT selector

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related