BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty twenty-one

How to Target CSS to Specific Pages in WordPress

10 threads Sep 10, 2025 Theme → Twenty twenty-one

Content

A common challenge when customizing a WordPress theme like Twenty Twenty-One is applying CSS changes to one specific page without affecting the entire site. This issue is frequently encountered when trying to style elements on a homepage, landing page, or product page uniquely.

Why This Happens: By default, CSS rules you add to the Additional CSS section or your theme's style.css file are global. They apply to every page where the selected HTML element appears. To override this behavior, you need to use a more specific CSS selector that targets the unique classes WordPress automatically adds to the <body> tag of each page.

The Most Common Solution: Using Body Classes

WordPress adds specific classes to the body element of every page, which you can use to target your CSS. For example, the homepage typically has a class of .home. To apply a style only to the homepage, you would prefix your CSS selector with .home.

Example: To add 40px of right padding to all columns, but only on the homepage, you would use the following CSS:

.home .wp-block-column {
    padding-right: 40px;
}

Important: Note the space between .home and .wp-block-column. This space is crucial. It means you are targeting an element with the class wp-block-column that exists somewhere inside an element with the class home.

Finding the Right Class for Other Pages:

  • Blog Page: .blog
  • Single Post Page: .single-post
  • Page by ID: WordPress adds a page-specific class like .page-id-123 (where 123 is your page's ID). You can find this ID by viewing the page's source code in your browser and looking at the <body> tag.
  • Page by Slug: A class like .page-slug-about is also often available.

Troubleshooting: If your CSS doesn't seem to be working, use your browser's developer tools (right-click on the page and select 'Inspect') to check two things:

  1. Verify that the page-specific body class (e.g., .home) is present.
  2. Confirm that your custom CSS selector is specific enough to override any existing global styles. You may need to add !important as a last resort (e.g., padding-right: 40px !important;).

By using these built-in WordPress body classes, you can precisely control where your custom styles are applied, keeping the rest of your site looking consistent.

Related Support Threads Support