Targeting the correct CSS object on a WordPress Page can be tricky, particularly given the increased depth of the Document Object Model (DOM). The Block Editor uses html Comments to create ever more complex hierarchies of nested objects, and successful styling depends on targeting the right one. Changing the styling of a column is one example of an element that needs exact treatment.
Targeting Columns in the WordPress Block Editor
To add or change the background color of a column created with the WordPress Block editor, look at the next object up in the DOM… that is, the nearest-higher-level element that encloses the object or element you want to style.
The Block Editor adds “wp-block-columns” and “wp-block-column” classes, but these don’t work to add a background color to the column.
To do so, target the element at the ul level:
page-id-xxxx ul {
list-style-type: none;
margin: 0 0;
padding: 10px 0;
text-align: center;
border-radius: 20px;
background-color: #ffffff99;
}Notice the Page ID class – this restricts the effect of the added css to the desired page only.
If you want to restrict further so as not to also affect the menus or other lists on the page, add the next level up to the css target definition string in DOM order:
.page-id-xxxx .wp-block-column ul {
list-style-type: none;
margin: 0 0;
padding: 10px 0;
text-align: center;
border-radius: 20px;
background-color: #ffffff99;
}