How to make a unique class on a page

However, Some pages don’t have a unique class.
You can log in with the account I provided, and go to 계정(my account)

Do you mean you don't find the unique class for the account page?
If so, try this: .woocommerce-account

I mean on the account page, there are different options such as order, address, profile and so on.

I also have added extra menu on my account page, which doesn't have any unique body class.

/my-account/menu1
/my-account/menu2
like this, each link should have a unque body class, but on my end, I can't find any unique body class.

Hi Jusung,

Can you share the login link as well?

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Yes. Here is the login link,

On this link, you can login with the account I provide.
And you can go to 계정 on the menu.

There you can see 4 buttons I made.
excepts for 주문, the other 3 buttrons don't have any unique body class.

Do you want these buttons that are on the same page to have different dynamic colours while they share the same body class?

If so, it's not possible. I would recommend using static color in this case.

I mean, those 4 buttons have different URL.
So, based on the URL, I want to set different color.
To make this, I need a unique body class.

If you see 스토어 or 블로그, you can see different color of buttons based on the page.
It is because The page of those buttons has a unique body class.

So, on my guessing, I have to give a unique body class to a certain link.
So, I can make it.

<script>
if(window.location.href.match('aeollure.com/my-account/msreview/')){
    jQuery('body').addClass('msreview1');
  }else if(window.location.href.match('aeollure.com/my-account/address-book/')) {
    $('body').addClass('address-book');
	}else if(window.location.href.match('aeollure.com/my-account/msm-profile/')) {
    $('body').addClass('msm-profile1');
}
</script>

I am trying this, but not workign.

You can try using PHP instead.

generate_hook_element_display filter could help.

Add your CSS through a Hook Element. Then, add a snippet like this:

add_filter( 'generate_hook_element_display', function( $display, $element_id ) {
$url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
    if ( 100 === $element_id && strpos($url,'my-account/msreview/') !== false ) {
        $display = true;
    }

    return $display;
}, 10, 2 );

Replace 100 with your Element ID:

Getting the Element ID: https://share.getcloudapp.com/YEuDdrnQ

Just make new instances of the Hook Element and the code for every page.