일반 형제 결합자 (~)

https://developer.mozilla.org/ko/docs/Web/CSS/General_sibling_combinator

일반 형제 결합자 - CSS: Cascading Style Sheets | MDN

 

일반 형제 결합자(~)는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다. 두 요소가 서로 붙어있을 필요는 없습니다.

 

p ~ span {
  color: red;
}

<span>이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>
<code>그리고 코드도 있습니다.</code>
<span>이제 빨강입니다!</span>
<code>더 많은 코드가 있습니다.</code>
<span>이것도 빨강입니다!</span>

결과 : 

이건 빨강이 아닙니다.

여기 문단이 있습니다.

그리고 코드도 있습니다. 이제 빨강입니다! 더 많은 코드가 있습니다. 이것도 빨강입니다!

 

 

 

 

 

여러개의 input 이 있을때는 input과 span 을 div 로 감싸줘야 해당 div에서만 valid 체크를 합니다.

그렇지 않고 input 을 나열하면 이전에 나열된 input의 peer 전부에 영향을 줍니다.

 

// 원하는 영역을 div 로 묶어서 사용하여야, 해당 div에만 중복되지 않는 css 효과를 적용할 수 있다.
<div>
	<input/>
	<span></span>
</div>
<div>
	<input/>
	<span></span>
</div>