A custom class added to a WordPress block changes its rendered HTML, but it does not create any visual styling by itself. If Jetpack Top Posts carries your class and nothing changes, treat it as a selector, cascade, or loading problem instead of assuming the block ignored the setting.
The Additional CSS class field for Jetpack Top Posts gives the block a hook for your own rule. Your WordPress custom CSS still has to load on the page, target the right element, and beat any competing theme or block styles.
Start on the live page, not only inside the editor. A WordPress custom CSS class can exist perfectly in the block settings while the rule you wrote is missing, aimed at the wrong node, or being overridden after the page renders.
Keep the class name plain in the block field. You enter something like popular-posts-card, then target .popular-posts-card in the WordPress CSS editor. Additional CSS classes in WordPress are class names, not complete selectors, so putting the leading period into the field can leave you targeting a class name you never intended.
Next, confirm the rule itself is loaded. If you are trying to work out how to edit WordPress CSS, this distinction saves time. A rule that never appears in DevTools points toward the WordPress custom CSS location, a disabled WordPress CSS plugin, a child-theme stylesheet that is not loading, or a cache problem. A visible rule with its declaration crossed out points somewhere else.
The WordPress custom CSS location can vary with the theme and editing setup, so do not assume the panel you used months ago is still the active source. Per-page WordPress custom CSS can also be scoped more narrowly than expected. Test with one harmless property first, such as a temporary outline, then remove it after you confirm the selector is reaching the block.
Jetpack Top Posts may place your custom class on an outer wrapper while the text, links, thumbnails, or list items sit deeper inside it. Styling the wrapper will not necessarily change a nested title color. In that case, .popular-posts-card a or another descendant selector may be the correct target, depending on the rendered markup you actually see.
DevTools makes the difference obvious. If your declaration is crossed out, inspect the winning rule before adding !important. Reaching for !important too early can turn a simple WordPress CSS style problem into a pile of exceptions that becomes harder to maintain.
The same check helps when WordPress child theme CSS is not overriding a parent or plugin rule. A child stylesheet can be loaded and still lose because its selector is weaker or because another stylesheet arrives later. If WordPress child theme CSS is not updating at all, verify the file being served before rewriting selectors. CSS not loading in WordPress and CSS loading but losing are two different failures.
Sites using minified CSS files may have another generated copy between your editable source and the file visitors receive. Purge the relevant cache or regenerate optimized assets after a CSS change when your setup uses that workflow. A hard refresh is useful for the browser copy, but it does not automatically clear a server or CDN cache.
When WordPress child theme CSS is not loading, compare the stylesheet URL in DevTools with the file you edited. When WordPress child theme CSS is not overriding, compare declarations instead. Those two checks prevent the common loop of editing the right code in the wrong file, then blaming Jetpack because the visual result never moves.
Once the class is present, the rule is loaded, and DevTools shows your declaration winning, the Jetpack block has done its part. Change WordPress CSS from the selector outward, one property at a time, and the failure usually becomes visible before you need another plugin or a more aggressive rule.
The Additional CSS class field for Jetpack Top Posts gives the block a hook for your own rule. Your WordPress custom CSS still has to load on the page, target the right element, and beat any competing theme or block styles.
Start on the live page, not only inside the editor. A WordPress custom CSS class can exist perfectly in the block settings while the rule you wrote is missing, aimed at the wrong node, or being overridden after the page renders.
Verify the class and rule before changing either
Open browser developer tools and inspect the Top Posts block on the front end. Knowing how to view WordPress CSS this way is useful because the Elements panel tells you whether your custom class is actually present, while the Styles panel tells you which rules match it. If the class is missing from the rendered markup, editing more CSS will not fix the problem.Keep the class name plain in the block field. You enter something like popular-posts-card, then target .popular-posts-card in the WordPress CSS editor. Additional CSS classes in WordPress are class names, not complete selectors, so putting the leading period into the field can leave you targeting a class name you never intended.
Next, confirm the rule itself is loaded. If you are trying to work out how to edit WordPress CSS, this distinction saves time. A rule that never appears in DevTools points toward the WordPress custom CSS location, a disabled WordPress CSS plugin, a child-theme stylesheet that is not loading, or a cache problem. A visible rule with its declaration crossed out points somewhere else.
The WordPress custom CSS location can vary with the theme and editing setup, so do not assume the panel you used months ago is still the active source. Per-page WordPress custom CSS can also be scoped more narrowly than expected. Test with one harmless property first, such as a temporary outline, then remove it after you confirm the selector is reaching the block.
The cascade can make valid CSS look broken
A rule can load correctly and still lose. The CSS cascade decides which declaration wins when several rules affect the same element, and specificity plus source order are often the reason WordPress CSS is not showing even though the stylesheet is present.Jetpack Top Posts may place your custom class on an outer wrapper while the text, links, thumbnails, or list items sit deeper inside it. Styling the wrapper will not necessarily change a nested title color. In that case, .popular-posts-card a or another descendant selector may be the correct target, depending on the rendered markup you actually see.
DevTools makes the difference obvious. If your declaration is crossed out, inspect the winning rule before adding !important. Reaching for !important too early can turn a simple WordPress CSS style problem into a pile of exceptions that becomes harder to maintain.
The same check helps when WordPress child theme CSS is not overriding a parent or plugin rule. A child stylesheet can be loaded and still lose because its selector is weaker or because another stylesheet arrives later. If WordPress child theme CSS is not updating at all, verify the file being served before rewriting selectors. CSS not loading in WordPress and CSS loading but losing are two different failures.
Caches can preserve yesterday's stylesheet
A correct rule can look dead when the browser, a caching plugin, or an optimization layer serves an older asset. Clearing the WordPress CSS cache should come after you verify the class and selector, not before, because cache purges cannot repair a selector that never matched.Sites using minified CSS files may have another generated copy between your editable source and the file visitors receive. Purge the relevant cache or regenerate optimized assets after a CSS change when your setup uses that workflow. A hard refresh is useful for the browser copy, but it does not automatically clear a server or CDN cache.
When WordPress child theme CSS is not loading, compare the stylesheet URL in DevTools with the file you edited. When WordPress child theme CSS is not overriding, compare declarations instead. Those two checks prevent the common loop of editing the right code in the wrong file, then blaming Jetpack because the visual result never moves.
Once the class is present, the rule is loaded, and DevTools shows your declaration winning, the Jetpack block has done its part. Change WordPress CSS from the selector outward, one property at a time, and the failure usually becomes visible before you need another plugin or a more aggressive rule.
