CSSでif-elseな条件分岐

@media (min-width: 600px) { /* if */ }
@media (max-width: 599px) { /* それ未満 */ }

:checked { /* if */ }
:not(:checked) { /* else */ }

[data-attr="foo"] { /* if */ }
[data-attr="bar"] { /* elseif */ }
:not([data-attr]) { /* else */}