css for specific pages

If I want to add the following CSS code to certain pages and prevent the theme’s CSS from affecting them, what should I do?

.whb-sticked .wd-nav[class*=”wd-style-underline”] .nav-link-text {
color: #0e0e96 !important;
}

.wd-nav[class*=”wd-style-underline”] .nav-link-text {
color: white !important;
}

.whb-general-header .wd-tools-element .wd-tools-icon {
color: white !important;
}

.whb-sticked .wd-tools-element .wd-tools-icon {
color: #0e0e96 !important;
}

.whb-sticked .whb-general-header {
background-color: white !important;
}

.whb-sticked .whb-general-header .wd-tools-element .wd-tools-icon {
color: #0e0e96 !important;
}

Hello,

To apply your custom CSS to specific pages use the specific page ID. Find the page ID by inspecting the body tag in your browser’s developer tools or by checking the page URL in the admin — it will look like post=123 in the edit screen.

You can target that in your CSS like this:

.page-id-123 .whb-sticked .wd-nav[class*="wd-style-underline"] .nav-link-text {
    color: #0e0e96 !important;
}

Best Regards,

Thanks it’s work

Can I follow the same method with a specific HTML block, and what is the CSS selector?

Hello,

Yes, you can follow the same method for a specific HTML block.

You can target it with the unique body class postid-15508. This makes it easy to apply custom styles just for that block.

For example, to change the submenu link color inside that HTML block, you can use:

body.postid-15508 .wd-sub-menu li > a {
    color: red;
}

Best Regards,

thanks , its work , you can close this ticket

Hello,

You’re very welcome! If you need anything else, feel free to reach out!

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards,

[Author]

Posts