CSS :has() インタラクティブファミリーツリー

Create an interactive CSS playground that demonstrates the power of the :has() selector with a family tree. Each node indicates parent-child relationships visually. Click on any person to see how :has() affects styling (highlight descendants, ancestors, siblings). Use pure CSS transitions and explain each :has() usage in comments. Keep the design minimal, clean, and modern.