.

p ~ span {
  color: red;
}

<p>태그 뒤에 있는 <span> 태그들 모두에게 적용된다. 

즉, <p>태그와 형제 관계여야하고, html상 <p> 뒤에 나와야 한다.

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

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

px을 썼을 때는 사용자가 브라우저 글씨 크기를 바꾸거나 확대비율을 바꿔도 글꼴이 고정값으로 유지된다.

rem을 쓰면 사용자 설정에 맞춰서 크기가 하게 만들 수 있다.

html {       
	font-size: 62.5%; 
	/* 62.5% of the base size of 16px = 10px.*/
	/* 브라우저의 기본 글씨 크기는 16px이다. 62.5%로 설정하면 기본 설정을 쓰는 유저 기준으로 10px을 기준으로 잡게된다 */
}

body {       
	font-size: 1.6rem; 
	/* reset 10*1.6 = 16px, to make sure you do not get any 10px around */
}

https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15