.direct-child--type>Button { background-color: red; color: white; } .direct-child--class>.test-child { background-color: blue; color: white; } .direct-sibling--type Button+Label { background-color: green; color: white; } .direct-sibling--id #test-child+#test-child-2 { background-color: pink; } .direct-sibling--class .test-child+.test-child-2 { background-color: yellow; } .direct-sibling--attribute Button[data="test-child"]+Button[data="test-child-2"] { background-color: blueviolet; color: white; } .direct-sibling--pseudo-selector Button+Button:disabled { background-color: black; color: white; } .general-sibling--type Button ~ Label { background-color: green; color: white; } .general-sibling--class .test-child ~ .test-child-2 { background-color: yellow; } .general-sibling--attribute Button[data="test-child"] ~ Button[data="test-child-2"] { background-color: blueviolet; color: white; } .general-sibling--pseudo-selector Button.ref ~ Button:disabled { background-color: black; color: white; } .sibling-test-label { text-align: center; } .sibling-test-label { margin-top: 8; }