How to make a dynamic css class whose name changes every visit to confuse scraper

As per my comment, I’m not sure why you’d want to do this, but it is possible.

You would use something like this for your CSS:

[class*='random-']{
    color:red;
    font-size:12pt;
}

That’s just your stylesheet targeting any class that starts with random-. You could change that to be whatever you want it to be, say entry- or whatever. You’ll just need to match it with the jQuery below.

Now, in your primary/main JS file, you’d want something like this, or take this entire code, make a new file and paste everything below into it. You’d have to enqueue that file though.

(function( $ ) {
    'use strict';
    $( document ).ready( function() {
        if( $( '.entry-content' ).length > 0 ) {
            var newClassName="random-"+Math.floor( ( new Date() ).getTime() / 1000 );
            $( '.entry-content' ).addClass( newClassName ).removeClass( 'entry-content' );
        }
    } );
} )( jQuery );

First thing we’re doing is checking if there is an .entry-content on the page – I generally always run a check like this first because I don’t want to bother executing anything unless there’s something on the page to be effected.

Then we’re generating a new class as a jQuery variable by combining random- with a string of numbers using the current date/time.

Lastly we’re searching for the .entry-content class, adding the random-1592183945 that we generated as a the newClassName variable, and then removing the .entry-content class.

And that’s it. Your CSS selector will recognize the class and apply style rules to it and each page load will generate a different class name every second, so scrapers should see them as being different.