{"id":15266552,"date":"2022-01-19T02:56:30","date_gmt":"2022-01-19T02:56:30","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/section-background-css-specificity\/"},"modified":"2022-01-19T02:56:30","modified_gmt":"2022-01-19T02:56:30","slug":"section-background-css-specificity","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/section-background-css-specificity\/","title":{"rendered":"Section Background CSS Specificity"},"content":{"rendered":"<p>The inline CSS generated for Section background is not specific\/localized enough to just the Section it&#8217;s supposed to applied to. For example, if I have a Section nested in another Section, and the parent section has a background, the CSS cascades down to the child Section because the selector is <code>.parent-section-id .grids-s-w_i:before<\/code> rather than only selecting the very next .grids-s-w selector.<\/p>\n<p>I resolved this by adding a <code>&gt;<\/code> in between the two css classes in \/src\/Core\/Blocks\/Section.php line 231, like <code>$style .= sprintf( &#039;%s &gt; .grids-s-w_i:before {&#039;, esc_attr( $selector ) );<\/code><\/p>\n<p>Not sure if this is a breaking change elsewhere, but worth considering adding to your next version as I&#8217;ve patched it locally.<\/p>\n","protected":false},"template":"","class_list":["post-15266552","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/15266552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/15266552\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=15266552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}