2012-03-24 3 views
0

I는 다음과 같이 여러 개의 블록이 :CSS 복잡한 INPUT 선택기

CHECKED로 입력 필드가 표시 될 때마다
<div class='templatechoicedesigncss'> 
<img src='/images/templatepics/random(100x140).png' /> 
<p> 
    <input type='radio' name='templatechoice' value='random' checked>Random</p> 
</div> 

- 나는 class=templatechoicedesigncss와 사업부에 CSS를 변경해야합니다.

하지만 순수한 CSS 만 사용하면됩니다. 자바 스크립트, jquery 또는 다른 트리거가 필요하지 않습니다. 그게 가능합니까?

+0

재미있는 질문! – tusar

+1

CSS 제한 : en.wikipedia.org/wiki/Cascading_Style_Sheets#Limitations (두 번째 글 머리 기호) –

+0

왜 Javascript 사용에 대한 제한이 있습니까? –

답변

2

JavaScript가 없으면 사용할 수 없습니다.

그런데 <span> 안에있는 <p>은 스팸이 인라인 요소이고 p가 단락이므로 잘못된 마크 업입니다.

또한 <label> 안에 "Random"텍스트를 넣으십시오.

1

아니요. 부모 CSS를 순수 CSS로 변경할 수 없습니다.

0

귀하의 방법은 아닙니다. 확인이 http://www.w3.org/TR/selectors/#checked

그것은 말한다 ...

라디오와 체크 박스 요소는 사용자가 전환 할 수

. 일부 메뉴 항목은 사용자가 선택하면 "선택"됩니다. 그러한 요소가 "on"으로 토글 된 경우 : checked pseudo-class가 적용됩니다. 체크 : 가상 클래스는 본질적으로 동적이며 사용자 작업 ( )으로 변경 될 수 있지만 이는 문서의 에있는 의미 론적 속성의 존재를 기반으로 할 수 있으므로 모든 미디어에 적용됩니다. 예를 들어, : 가상 클래스는 처음에 HTML4의 17.2.1 절에 설명 된대로 HTML4 을 선택하고 속성을 검사 한 요소에 적용되지만 물론 사용자는 과 같은 요소를 "해제"할 수 있습니다. case : checked 가상 클래스가 더 이상 적용되지 않습니다.

... 정확히 말은 단어입니다.

기본적으로 을 의미합니다. 동적으로 CSS3에서는의 내용을 변경할 수 있지만 부모는 아닙니다. 하지만 오, 브라우저에서 완전히 지원되지는 않습니다. 다른 방법은 JS | jQuery | MooTools | YUI 등

또한 BoltClock은 CSS에 부모 셀렉터가 없다고 지적했습니다. CSS를 통해서만 가능하지 않습니다.

+1

이것은': checked' 의사 클래스와 아무런 관련이 없습니다. 그것은 CSS에 부모 셀렉터가없는 것과 관련이 있습니다. – BoltClock