/* https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/has-pseudo-class.html */ #d_main:has(input) div { color: grey } #d_main:HAS(#d_checkbox:checked)>#d_subject { color: red } #d_main:has(#d_option:checked)>#d_subject { color: red } #d_main:hAs(#d_checkbox:disabled)>#d_subject { color: green } #d_main:has(#d_option:disabled)> :is(#d_subject, #d_subject2) { color: green } #d_main:has(#d_optgroup:disabled)>#d_subject { color: blue } #d_main:not(:has(#d_checkbox:enabled))>#d_subject3 { color: green } #d_main:not(:has(#d_option:enabled)) :is(#d_subject3, #d_subject4) { color: green } #d_main:not(:has(#d_optgroup:enabled))>#d_subject3 { color: blue } /* https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/has-in-ancestor-position.html */ div:has(.c_test, [c_test_attr]) #c_subject { background-color: red } div:has(> .c_test, > [c_test_attr]) #c_subject { background-color: green } div:has(~ .c_test, ~ [c_test_attr]) #c_subject { background-color: yellow } div:has(+ .c_test, + [c_test_attr]) #c_subject { background-color: blue } div:has(~ div .c_test, ~ div [c_test_attr]) #c_subject { background-color: purple } div:has(+ div .c_test, + div [c_test_attr]) #c_subject { background-color: pink } /* https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/has-in-adjacent-position.html */ div:has(.a_Test, [a_test_attr])+#a_subject { background-color: red; } div:has(> .a_Test, > [a_test_attr])+#a_subject { background-color: green; } div:has(~ .a_Test, ~ [a_test_attr])+#a_subject { background-color: yellow; } div:has(+ .a_Test, + [a_test_attr])+#a_subject { background-color: blue; } div:has(~ div .a_Test, ~ div [a_test_attr])+#a_subject { background-color: purple; } div:has(+ div .a_Test, + div [a_test_attr])+#a_subject { background-color: pink; } /* https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/attribute-or-elemental-selectors-in-has.html */ div, main { background-color: grey; margin: 5px; min-height: 20px; min-width: 20px; padding: 5px; } .b_subject:has(> .b_child) { background-color: red; } .b_subject:has(.b_descendant) { background-color: green; } .b_subject:has([attrname="b_descendant"]) { background-color: blue; } .b_subject:has(#b_div_descendant) { background-color: yellow; } .b_subject:has(b_descendant) { background-color: yellowgreen; } #visited-1:has(:link) { color: green; } #visited-2:has(:visited) { color: yellow; } #visited-3:has(:any-link) { color: yellowgreen; } #visited-4:has(:visited) { color: red; } #main_specificity :has(#foo) { --t0:PASS; } #main_specificity :has(.foo) { --t0:FAIL; } #main_specificity :has(span#foo) { --t1:PASS; } #main_specificity :has(#foo) { --t1:FAIL; } #main_specificity :has(.bar, #foo) { --t2:FAIL; } #main_specificity :has(#foo, .bar) { --t2:PASS; } #main_specificity :has(.bar, #foo) { --t3:PASS; } #main_specificity :has(.foo, .bar) { --t3:FAIL; } #main_specificity :has(span + span) { --t4:PASS; } #main_specificity :has(span) { --t4:FAIL; } #main_specificity :has(span, li, #foo) { --t5:PASS; } #main_specificity :has(span, li, p) { --t5:FAIL; } #nested_main :has(> :has(#c)) { color: red; } #pseudo_main :has(> #b)::before { color: green; }