Change background color of a custom wordpress html block with additional CSS

I’m trying to change the background color of a custom html WordPress block, but when I access this block, I change the background color of all custom html blocks from other pages this is the CSS instruction I am using: #main.site-main.post-single.order-first{ background-color: #212529; } I expected the background color of the custom html block to only be changed on this page, however it was also changed on another page which also has a custom html block

In the block settings in the Wordpress editor (i.e. the column at the right side of the window), there is the option to assign a class to a block (all the way at the bottom of the column). Do that, use a unique name for it and create a CSS rule for that class with the desired settings.

February 4, 2024

If you have a custom html, you can always add unique class to wrapper tag, and apply any styles to this specific element: Your CSS code in this case should look like this: .my-unique-block { background-color: #212529; } If you don't have an access to html, try to find the specific postid id class pointing to your block, like postid-17 and change to: #main.site-main.postid-17.order-first{ background-color: #212529; }

February 4, 2024

try this.. #main.site-main.post-single.order-first{ background-color: #212529!important; }

February 4, 2024