CODEWITHSUNDEEP
javascriptjquerycss-selectorscross-browser
Andres SK
Andres SK

Reputation: 10982

How to check if browser supports CSS general sibling selector ~

How can I test with Javascript (jQuery) if the browser supports the css general sibling selector ~?

Example:

#toggled:checked ~ #sidebar {
    display: block;
}

That CSS code won't work in IE 8-, Firefox 3-, Safari 3.1-, so in those cases I need to apply a Javascript alternative to display the #sidebar block.

Upvotes: 1

Views: 68

Answers (1)

Nick Louloudakis
Nick Louloudakis

Reputation: 6015

@epascarello is right in comments, why not using JS?

For instance, in JS (untested - using jQuery):

let isRuleApplied = (selector, keyApplied, valueApplied) => {
  let element = $(selector);
  return element && element.css(keyApplied) === valueApplied;
};

console.log(isRuleApplied('#toggled:checked ~ #sidebar', 'display', 'block'));

Or just use style property of getElementById node, or querySelector using Vanilla JS.

Kudos to the idea here.

Upvotes: 1

Related Questions