Biblioteka snippetów

Selektory rodzeństwa w CSS (Sibling Selectors)

/* Next sibling (adjacent sibling) */
h1 + p { color: red; }                          /* p immediately after h1 */
.button + .button { margin-left: 10px; }        /* button after button */

/* Any following sibling (general sibling) */
h1 ~ p { color: blue; }                         /* all p elements after h1 */
.active ~ li { opacity: 0.5; }                  /* all li after .active */

/* Previous sibling (using :has()) */
p:has(+ h2) { margin-bottom: 0; }               /* p before h2 */
li:has(+ .active) { border-right: 2px solid; }  /* li before .active */

/* Sibling after element with specific child */
div:has(img) + p { font-weight: bold; }            /* p after div containing img */
.item:has(.sold) ~ .item { filter: grayscale(1); } /* all .item after .item with .sold */