[ ] と ~ の使い方について教えてください。

1：10くらいの説明で、「 like の配下にある type 属性が、チェックボックスの要素がチェックされたとき、その兄弟要素である heart クラスがついた要素はこのスタイルにしてね、と書いてあげます。」と説明されており、以下のコードが記載されています。
.like [type="checkbox"]:checked ~ .heart {

このコードの [ ] と ~ の使い方・意味が理解できませんでした。
これについて、もう少し詳しくご説明いただけないでしょうか。
どうぞよろしくお願いします。