Add custom css class to wp-list-table row for Media Screen

Using CSS

Here is an example:

.wp-list-table.media tr:has(.image-icon img[src$=\.webp]) { 
    background-color: orange;
}

to target all rows in the media list table that matches the image icon source with a .webp file-ending.

The secret ingredients in the CSS sauce above are:

• the :has() relational pseudo class, that enables us to target the parent of specific child selectors, like: PARENT:has(CHILD). This answer was helpful. Note that Firefox support is still limited.

• and the img[src$=\.webp] part that matches the end part of the image src attribute to .webp.

We can use the following code snippet (PHP) to target the upload.php admin screen with:

add_action( 'admin_enqueue_scripts', function ( $hook ) {
    if ( 'upload.php' != $hook ) {
        return;
    }
    wp_register_style( 'wpse', false );
    wp_enqueue_style( 'wpse' );
    wp_add_inline_style( 'wpse', '.wp-list-table.media tr:has(.image-icon img[src$=\.webp]) { background-color: orange;}' );
});

Alternatives

Another way is to extend the WP_Media_List_Table class (PHP) and override the display_rows() method to add a custom class to the current hard coded rows classes. But I don’t think this is a good way because it introduces some maintenance burden. I’m also not a fan of using output buffering method here to be able to change the output of that method to reduce that burden.

Injecting a custom row class via Javascript is also an option.

Might also consider other approaches, like adding a custom column with custom icons/info, instead of highlighting whole rows, to avoid overriding the default alternating background color scheme.