Uncovering classes and selectors in CSS files that match an element with JavaScript

Question

Uncovering classes and selectors in CSS files that match an element with JavaScript

Trying to explain my idea with an example since it's a bit tricky. Imagine we have this HTML code:

<ul>
  <li id="myli" class="myclass">Hello</li>
</ul>

along with the corresponding CSS:

.myclass{
   color:red;       
}
li.myclass{
   background-color:black;
}
ul li{
   float:left;
}

Now, the goal is to develop a JavaScript function that takes a DomElement as input and retrieves all the matching selectors from the CSS files for that element (similar to the F12 toolbar in Chrome that displays all styles for an element), like this:

var mySelectors = GetSelectorsForElement(document.getElementById("myli"));

and the result stored in mySelectors would be:

[".myclass",
 "li.myclass",
 "ul li"]

Is it possible to accomplish this in JS?

javascript jquery css

Answer 1

Answer №1

Based on your explanation, it seems that you will already possess the id. If you are also interested in obtaining the classes, consider utilizing the following approach:

window.getMatchedCSSRules(document.getElementById("id"));

Answer 2

Based on your explanation, it seems that you will already possess the id. If you are also interested in obtaining the classes, consider utilizing the following approach:

window.getMatchedCSSRules(document.getElementById("id"));

Answer 3

Answer №2

If you're looking for an alternative to using the Webkit-native getMatchedCSSRules due to potential browser support issues, give this function a try:

function getCSS(selector) {
    var styleSheets = document.styleSheets;
    var matchedRules = [];
    for (var i = 0; i < styleSheets.length; i++) {
        var rules = styleSheets[i].rules || styleSheets[i].cssRules;
        for (var j = 0; j < rules.length; j++) {
            if (selector === rules[j].selectorText) {
                matchedRules.push(rules[j].cssText);
            }
        }
    }
    return matchedRules;
}

Check it out on JSFiddle: http://jsfiddle.net/HP326/

Inspired by a solution on Stack Overflow

Answer 4

If you're looking for an alternative to using the Webkit-native getMatchedCSSRules due to potential browser support issues, give this function a try:

function getCSS(selector) {
    var styleSheets = document.styleSheets;
    var matchedRules = [];
    for (var i = 0; i < styleSheets.length; i++) {
        var rules = styleSheets[i].rules || styleSheets[i].cssRules;
        for (var j = 0; j < rules.length; j++) {
            if (selector === rules[j].selectorText) {
                matchedRules.push(rules[j].cssText);
            }
        }
    }
    return matchedRules;
}

Check it out on JSFiddle: http://jsfiddle.net/HP326/

Inspired by a solution on Stack Overflow

Answer 5

Answer №3

Retrieve the CSS rules that apply to the element with the id "myli".

Answer 6

Retrieve the CSS rules that apply to the element with the id "myli".

Uncovering classes and selectors in CSS files that match an element with JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Ways to stop the react-router from causing the page to refresh

modify hidden input values with a dropdown menu and the power of jquery

Discover the #ID and apply AddClass through the URL in the Navigation Jquery

Listening for keypress events on a div element using React

Dnd-kit: item loses its place in line when dragged over Droppable area

What is the reason behind JavaScript subtracting the timezone offset for ISO dates when passed into the Date() function?

"Looking to access your Express app in a VM from the internet? Here's how

Avoiding the opening of a select menu

Is it possible to create distinct overlapping divs without using absolute positioning?

Creating a loading screen with JQuery for an Ajax request

Locate an element that is nested within a "concat(" XPATH using Selenium

Converting JSON data types into TypeScript interface data types

json How to retrieve the first index value in jQuery

Loading a Vue.js template dynamically post fetching data from Firebase storage

Updating AngularJS: Removing the hashtag using history.pushState()

My AngularJS ng-show functionality is not functioning as expected. I have already reviewed the syntax and still encountering issues

Combining Strings and Integers in Javascript

What causes the error message "ng-model is undefined"?

My CSS seems to be causing an issue and preventing the function from running correctly. Now I just need to

Position the link to the right of the menu using CSS styling