HTML & Event Pages: Unspecific IDs and Classes at the top
You can use the body_class filter, query CiviCRM's state and then add suitably named classes:

add_filter( 'body_class', 'my_civi_add_body_classes' );

/**
 * Add classes to body element if on CiviCRM basepage.
 *
 * @param array $classes The existing body classes
 * @return array $classes The modified body classes
 */
function my_civi_add_body_classes( $classes ) {

    // bail if no CiviCRM
    if ( ! function_exists( 'civi_wp' ) ) {
        return $classes;
    }

    // bail if not on CiviCRM's basepage
    if ( 'basepage' != civi_wp()-&gt;civicrm_context_get() ) {
        return $classes;
    }

    // get CiviCRM's arguments
    $args = civi_wp()-&gt;get_request_args();

    // bail if we don't have any
    if ( is_null( $args['argString'] ) ) {
        return $classes;
    }

    // check for event
    if ( isset( $args['args'][1] ) AND $args['args'][1] == 'event' ) {
        $classes[] = 'civi-event';
    }

    // check for listing
    if ( isset( $args['args'][2] ) AND $args['args'][2] == 'ical' ) {
        $classes[] = 'civi-event-list';
    }

    // check for info page
    if ( isset( $args['args'][2] ) AND $args['args'][2] == 'info' ) {
        $classes[] = 'civi-event-info';
    }

    // check for registration
    if ( isset( $args['args'][2] ) AND $args['args'][2] == 'registration' ) {
        $classes[] = 'civi-event-registration';
    }

    // ... add further checks ...

    return $classes;

}


Amend as per your requirements.

Cheers, Christian