특정 요소를 기준으로 요소를 선택하는 CSS 선택기

Question

CSS를 사용하여 입력 주변에 채색 경계선을 그려하려고합니다. 순수한 CSS로 수행 할 수 있는지 확실하지 않지만 어쩌면 거기에 css3 선택기가 있습니까? http://jsfiddle.net/tsolti/rquf4kxh/

<table> 
    <tr> 
    <td> 
     <input class="error" value="red border"/><br/> 
     <input id="1" value="green border"/> 
    </td> 
    <td> 
     <input id="2" value="blue border"/> 
    </td> 
    </tr> 
</table>` 

.error { 
    border: 1px solid red; 
} 

내가 파란색 테두리가하는 녹색 테두리와 # 2를 얻을 수 # 1를 원하는 :

여기에 미니 바이올린입니다. 어떤 아이디어? 다시 : JS 허용 안 함 :

중요 : 첫 번째 입력에 class = error가있는 경우에만 색상을 지정해야합니다.

Answer 1

당신은 할 수 있습니다 :

이 DEMO

가 CSS : 질문이 조건을 포함하여 편집 한 후

.error { 
    border: 1px solid red; 
} 

td input.error ~ input { 
    border:1px solid green; 
} 

td + td input { 
    border:1px solid pink; 
} 

편집은 색상 만 설정해야 할 때 .error 클래스가 설정 됨 :

현재 HTML 구조에서는 CSS를 사용하여 마지막 입력을 대상으로 만 지정할 수 있습니다 (.error 요소의 형제 또는 자손이 아님).

해결 방법 :

DEMO

변경 HTML 태그 그래서 두 입력은 .error 입력의 형제 자매 것을 :

HTML :

<table> 
    <tr> 
     <td> 
      <input class="error" value="red border"/> 
      <input value="green border"/> 
      <input value="blue border"/> 
     </td> 
    </tr> 
</table> 

그래서 당신은 + 형제 셀렉터를 타겟팅 할 수 있습니다 :

CSS

:

.error { 
    border: 1px solid red; 
    display:block; 
} 

input.error+input { 
    border:1px solid green; 
} 
input.error+input+input { 
    border:1px solid blue; 
} 

Answer 2

는이 같은 일을하려고합니까?

input[value="red border"]{ 
    border: 1px solid red; 
} 
input[value="green border"]{ 
    border: 1px solid green; 
} 
input[value="blue border"]{ 
    border: 1px solid blue; 
}