Search code examples
cssdomcss-selectorspseudo-class

Is this a valid CSS Selector?

With-respect to the following expression:

radio:focus > .approve, radio:focus > .dis-approve{/*statements...*/}

Is it accepted by CSS interpreter/compiler?

Objective: applies iff both .approve and .dis-approves' radio-typed parents are in-focus.

Solution

  • It is valid (see BoltClock's comment), but you'll find that it will not match anything as it has several problems:

    1. radio isn't a valid HTML element. Did you mean input[type=radio]?
    2. If you did mean input[type=radio], that element cannot have children, so > .approve and > .dis-approve wouldn't select anything. Did you mean + .approve and + .dis-approve, to an element next to this one?

    The best way to know if your CSS works is to apply your CSS to a HTML structure which should accompany this and see what happens.