CSS Combinators ~

~ General Sibling

h2 ~ p {
  color: red;
}

p요소가 h2요소 다음에 와야 함, 하지만 바로 위치해야되는 것은 아님

 

> Child

div ~ p {
  color: red;
}

div의 직속 자식이 p태그에만 해당 스타일을 적용시킨다.

div div article p 순으로 내려간다면 가장 안쪽의 p는 스타일이 적용되지 않는다.

 

(아무런 기호 없이) Descendant 

div p {
  color: red;
}

div태그 아래의 모든 자식에 p가 있기만 하면 된다.

div div article p 순으로 내려간다면 가장 안쪽 p도 스타일이 적용된다.