css for body, header, main, etc containers being ignored

  • Resolved catalano

    (@catalano)


    2 weeks ago

    Hello,

    I have created a child theme for twenty twenty-five. In the style.css file for the child theme I am trying to add some css to container elements (body, header, etc.) For some reason they are being completely ignored. I have refreshed the cached numerous times. When viewing the Sources tab in Chrome Developer mode I can see the css code in the file. But when looking at the styles applied to those particular elements they are not there. It’s not even the case that they are overridden by a higher specificity style. They just don’t show up in the applied styles section. And, yes, other non-container css styles are being applied to other items from the child stylesheet.

    Any ideas as to what is causing this? And there are no console errors either.

    Thanks.

    • This topic was modified 2 weeks ago by catalano.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Mohammed Jabir shaikh

    (@jabir20)

    2 weeks ago

    Hi,

    Since Twenty Twenty-Five is a block theme, some styles are controlled through theme.json and Global Styles rather than only through style.css.

    A few things to check:

    1. Make sure the child theme is activated
      Go to Appearance → Themes and confirm the child theme is the active theme.
    2. Verify the child theme is loaded correctly
      You mentioned that some non-container styles are working, which suggests the stylesheet is loading correctly.
    3. Check for Global Styles / theme.json overrides
      With block themes like Twenty Twenty-Five, styles for elements such as body, header, and other containers may be generated dynamically by WordPress from:
    • theme.json
    • Global Styles (Appearance → Editor → Styles)

    These generated styles may override or bypass simple selectors in style.css.

    1. Try increasing specificity temporarily
      For testing purposes, try something like:
    body {
    background: red !important;
}

    If that works, then the issue is likely related to specificity or generated styles.

    1. Inspect the actual DOM structure
      Some block themes do not use plain header or main elements in the way classic themes did. The visible containers may instead use nested block wrappers with generated classes.
    2. Child theme documentation
      You may also want to review the official child theme documentation:
      https://developer.wordpress.org/themes/advanced-topics/child-themes/

    If possible, sharing the specific CSS rule you are trying to apply would help identify the exact cause.

    As an additional development-only test, you can also temporarily use cache-busting when enqueueing the child stylesheet:

    wp_enqueue_style(
   'child-style',
   get_stylesheet_uri(),
   [],
   time()
);

    This should only be used during development/testing, not on a production site.

    Thread Starter catalano

    (@catalano)

    1 week, 4 days ago

    Thank you. It appears it was a caching problem after all.

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.