Download > Install > Activate. That's it!

The page slug you are on, example: /contact-us/, would have a targetable CSS class of .contact-us. This page, /plugin/add-slug-as-body-class/, when inspected, can be seen with a body class of .plugin-add-slug-as-body-class.

This code can be pasted into the functions.php file of your child theme or, download and install the plugin for simple code activation.

/*
Plugin Name: Lightweight Plugins - Add Slug to Body Class
Plugin URI: https://lightweightplugins.com/plugin/add-slug-to-body-class/
Description: A lightweight plugin that adds the current slug to the body class.
Version: 1.4
Author: WP Maintenance Experts
Author URI: https://wpmaintenanceexperts.com/
License: GPLv2 or later
*/

function lightweight_plugins_slug_body_class( $classes ) {
	global $post;
	if ( isset( $post ) ) {
	$classes[] = $post->post_type . '-' . $post->post_name;
	}
	return $classes;
	}
add_filter( 'body_class', 'lightweight_plugins_slug_body_class' );