CSS "초점"의사 클래스 선택기

Question

나는이 권리를 얻기 위해 싸우고 있었어요 ... 기본적으로 나는 다음과 같은 HTML 설정이 있습니다

<div class="box10"> 
    <span class="label01">Name:</span> 
    <input class="tboxes" type="textbox" /> 
</div> 

"span.label01"인라인 요소입니다, 텍스트 상자 "input.tboxes"의 왼쪽에 나타납니다. 내가 뭘하려고하면 "span.label01"및 "div.box10"텍스트 상자에 포커스를받을 때 어떤 스타일을 첨부하십시오.

input.tboxes:focus span.label01 { 
    color:#FF9900; 
    ... 
} 

을하지만 아무 반응이 없습니다 :

나는 다음과 같은 CSS 코드를 시도했습니다. 이 CSS 선택기 문제를 알지만, 나는 그것을 올바르게 이해할 수 없습니다. 심지어 인접한 형제 선택자를 시도해 보았습니다. 누구든지 나를 도울 수 있습니까? 티아!

Answer 1

현재 선택자는 입력 내용 내에서 스팬을 찾고 있습니다. 지금까지 내가 아는 한, CSS 선택기 지원의 현재 상태로는 당신이하려는 일이 실제로 가능하지 않습니다.

그래서 같은 jQuery를의 비트와 함께 그것을 어떻게 유혹 할 것입니다 : 당신이 다음 .label01.focussed에 대한 스타일을 설정하고 .box10 경우에 당신이하고자하는 일을해야

$("input.tboxes").focus(function() { 
    $(this) 
    .parent("div:first") 
     .addClass("focussed") 
     .find("span") 
      .addClass("focussed"); 
}); 

.focussed.

Answer 2

아니요 - CSS 선택기로는이 작업을 수행 할 수 없습니다. Wikipedia에서 인용구 :

선택기가

CSS를 상승 할 수없는 특정 기준을 만족하는 부모 또는 요소의 조상을 선택 할 수있는 방법을 제공하지 않습니다. 고급 선택기 체계 (예 : XPath)를 사용하면 더 정교한 스타일 시트를 사용할 수 있습니다. 그러나 CSS 작업 그룹에서 상위 선택자에 대한 제안을 거부하는 주된 이유는 브라우저 성능 및 증분 렌더링 문제와 관련이 있습니다.

당신은, 그러나, 몇 가지 간단한 자바 스크립트를 사용하여이 작업을 수행 할 수 있습니다 :이 선택기 형제의 사용을 통해 완전히 가능하다

// with jQuery: 
$('input.tboxes').focus(function() { 
    $(this).parent().find('span.label01').addClass('active'); 
}); 

Answer 3

.

input.tboxes:focus + span.label01 { 
    color:#FF9900; 
    ... 
} 

이 규칙은 입력이 집중 될 때마다 label01에 적용됩니다.

그러나은 스팬이 입력의 오른쪽에있는 경우에만 작동하므로 요소의 위치를 ​​전환해야합니다. 빠른 "position : relative"는 div에 있고 "float : left"는 범위에서 뒤로 이동합니다.