오류 메시지 전후의 CSS

Question

현재 배경이 투명한 검색 표시 줄이 있습니다. 텍스트와 아이콘은 흰색입니다.

검색 막대에 잘못된 입력이있는 순간 빨간색 오류 상자가 그 위에 표시됩니다. 위의 줄이 다음과 같이 내가 그것을 변경할

그렇게 하단 바는 물론 빨강/분홍색으로 변합니다 :

HTML :

<form class="form" id="travel-wizard-v2-form"> 
      <ul class="errors" style="display:none;"> 
       <li class="error tw2-location-error" style="display:none;">Please tell us where you would like to travel to</li> 
       <li class="error tw2-search-term-error" style="display:none;">Please enter a search term of at least 3 chars long.</li> 
      </ul> 

      <div class="input-group destination-cont"> 
       <input type="text" data-validate="true" data-validatetype="empty" id="tw2-destination" data-provide="typeahead" placeholder="Hotels Destination Placeholder" autocomplete="off"> 
       <span class="icon icon-search input-icon"></span> 
      </div> 

CSS :

.travel-wizard .travel-wizard-content .input-group input { 
height: 50px; 
background-color: rgba(255,255,255,.25); 
border: none; 
float: left; 
border-top-right-radius: 0; 
border-bottom-right-radius: 0; 
box-sizing: border-box; 
color: #ffffff; 
font-size: 13px; 
font-weight: 100; 
padding-left: 10px; 
} 

.travel-wizard .travel-wizard-content .icon.icon-search { 
top: 17px; 
display: block; 
background: 0 0; 
margin: 0; 
color: #ffffff; 
} 

그래서 색상을 바꿀만큼 간단합니다 : 검정색; background-color :이 CSS 파일 모두에 분홍색이 있으면 위의 오류 막대와 동일하게 보입니다. 그러나 나는 분홍색으로 바뀌는 배경이 필요하며 사용자가 잘못된 입력을했을 때만 텍스트와 아이콘이 검은 색으로 변합니다!

Answer 1

우리가 <ul class="errors" style="display:none;"> 요소는 오류가 발생 DOM에 나타납니다 있다고 가정 할 수 있다면, 당신은 형제 선택 사용할 수 있습니다 귀하의 의견/도움을

.errors + .destination-cont input { 
    color: black; 
    background-color: pink; 
}