What is the method for uncovering classes that do not have any associated CSS selectors?

Question

What is the method for uncovering classes that do not have any associated CSS selectors?

Take a look at this snippet of HTML code:

<style type="text/css">
.existing-class {
  background-color: #000;
}
</style>
<div class="existing-class non-existing-class"></div>

Within this code, there are two classes applied to the <div> element. The interesting part is that the class non-existing-class is not actually defined in the CSS on the page.

So, here's the question: How can a developer use programming techniques to identify elements on a webpage that are using classes which have not been defined in the loaded CSS?

html css

Answer 1

Answer №1

Great job!😊
Make sure to pay close attention to the script I've put together, especially the getUndefinedClasses function.

function httpGet(theUrl) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open( "GET", theUrl, false ); // synchronous request
  xmlHttp.send( null );
  return xmlHttp.responseText;
}


function getAllCSSClasses(cssdata) {
  var re = /\.(.+)\{/g;
  var m;
  let classes = [];
  do {
    m = re.exec(cssdata);
    if (m) {
      for(let key in m) {
        if(
           (typeof m[key] == "string") && 
           (classes.indexOf(m[key]) == -1) &&
           (m[key].indexOf(".") == -1)
          )
          classes.push(m[key].replace(/\s/g, " "));
      }
    }
  } while (m);
  return classes;
}

function getAllClasses() {
  var csses = document.querySelectorAll('link[rel="stylesheet"]'); 
   var classes = []
  for (i = 0; i < csses.length; ++i) {
    // let styledata = httpGet(csses[i].href);
    var styledata = ".hi{ display: none; }";
    var cclasses = getAllCSSClasses(styledata);
    var classes = Object.assign([], classes, cclasses);
    classes.concat(cclasses);
  }
  return classes;
}

function getHTMLUsedClasses() {
  var elements = document.getElementsByTagName('*');
  var unique = function (list, x) {
    if (x != "" && list.indexOf(x) === -1) {
        list.push(x);
    }
    return list;
  };
  var trim = function (x) { return x.trim(); };
  var htmlclasses = [].reduce.call(elements, function (acc, e) {
    return e.className.split(' ').map(trim).reduce(unique, acc);
  }, []);
  return htmlclasses;
}


function getUndefinedClasses(cssclasses, htmlclasses) {
  var undefinedclasses = [];
  for (let key in htmlclasses) {
    if(cssclasses.indexOf(htmlclasses[key])  == -1 ) {
       undefinedclasses.push(htmlclasses[key]);
    }
  }
  return undefinedclasses;
}

var cssclasses = getAllClasses();
var htmlclasses = getHTMLUsedClasses();

console.log("Undefined classes : " + getUndefinedClasses(cssclasses, htmlclasses))

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="hi there">
</head>
<body>
  <div class="hi"></div>
  <div class="there"></div>
  <div class="there_thier_333"></div>
</body>
</html>

Here's what has been accomplished:

I extracted all the class names from the CSS data provided (you can pass the CSS data in various ways).
Subsequently, I gathered all the classes utilized in HTML elements, storing them in arrays.
Lastly, I identified and added the classes used by HTML Elements but not present in the cssclasses array, giving us the undefined classes in CSS.

(Access jsbin here for an example)

Answer 2

Great job!😊
Make sure to pay close attention to the script I've put together, especially the getUndefinedClasses function.

function httpGet(theUrl) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open( "GET", theUrl, false ); // synchronous request
  xmlHttp.send( null );
  return xmlHttp.responseText;
}


function getAllCSSClasses(cssdata) {
  var re = /\.(.+)\{/g;
  var m;
  let classes = [];
  do {
    m = re.exec(cssdata);
    if (m) {
      for(let key in m) {
        if(
           (typeof m[key] == "string") && 
           (classes.indexOf(m[key]) == -1) &&
           (m[key].indexOf(".") == -1)
          )
          classes.push(m[key].replace(/\s/g, " "));
      }
    }
  } while (m);
  return classes;
}

function getAllClasses() {
  var csses = document.querySelectorAll('link[rel="stylesheet"]'); 
   var classes = []
  for (i = 0; i < csses.length; ++i) {
    // let styledata = httpGet(csses[i].href);
    var styledata = ".hi{ display: none; }";
    var cclasses = getAllCSSClasses(styledata);
    var classes = Object.assign([], classes, cclasses);
    classes.concat(cclasses);
  }
  return classes;
}

function getHTMLUsedClasses() {
  var elements = document.getElementsByTagName('*');
  var unique = function (list, x) {
    if (x != "" && list.indexOf(x) === -1) {
        list.push(x);
    }
    return list;
  };
  var trim = function (x) { return x.trim(); };
  var htmlclasses = [].reduce.call(elements, function (acc, e) {
    return e.className.split(' ').map(trim).reduce(unique, acc);
  }, []);
  return htmlclasses;
}


function getUndefinedClasses(cssclasses, htmlclasses) {
  var undefinedclasses = [];
  for (let key in htmlclasses) {
    if(cssclasses.indexOf(htmlclasses[key])  == -1 ) {
       undefinedclasses.push(htmlclasses[key]);
    }
  }
  return undefinedclasses;
}

var cssclasses = getAllClasses();
var htmlclasses = getHTMLUsedClasses();

console.log("Undefined classes : " + getUndefinedClasses(cssclasses, htmlclasses))

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="hi there">
</head>
<body>
  <div class="hi"></div>
  <div class="there"></div>
  <div class="there_thier_333"></div>
</body>
</html>

Here's what has been accomplished:

I extracted all the class names from the CSS data provided (you can pass the CSS data in various ways).
Subsequently, I gathered all the classes utilized in HTML elements, storing them in arrays.
Lastly, I identified and added the classes used by HTML Elements but not present in the cssclasses array, giving us the undefined classes in CSS.

(Access jsbin here for an example)

What is the method for uncovering classes that do not have any associated CSS selectors?

Answer №1

Similar questions

methods to locate the parent element of an element with selenium

The POST request did not yield an HttpResponse object; instead, it returned None

The presence of parentheses in a JQuery selector

What are the methods for storing scripts and images from my website?

Hiding and securing a div element when JavaScript is disabled

"Utilize Angular's functionality to include labels for checkboxes generated using *ngFor directive

TinyMCE evades the FreeMarker tags

Vue Template ref Error: Unable to access scrollHeight property of null object

Troubleshooting z-index conflict when using :before pseudo element to emphasize list entries

Determine the outcome with a PHP conditional statement for either "

Different ways to adjust the appearance of table borders in HTML

How can I convert a number to the format of hh:mm using Angular?

Is it possible for Websockets to receive data from Ajax requests?

I'm struggling with organizing my webpage layout using CSS flexbox and CSS grid

CSS animation stalling

Utilizing jQuery to execute a particular task based on the selection of a radio button

Leveraging Ajax to fetch JQuery

Is there a reason why the integration of OnsenUI with Vue using vue-onsenui and v-ons-segment is not functioning

Typescript input event

Setting the base font size for different screen sizes in Bootstrap 4 with responsive font sizing techniques