There are some styles in my parent theme that I would simply remove from the stylesheet if I was not using a child theme. Obviously, I do not want to remove them from the parent css, but is there a way to effectively "remove" the styles using my child theme?

There are some styles in my parent theme that I would simply remove from the stylesheet if I was not using a child theme. Obviously, I do not want to remove them from the parent css, but is there a way to effectively "remove" the styles using my child theme?

• css
• child-theme

• To extend this question, in addition to specific styles, it would be nice to know if there's a way to remove external stylesheet references. For example, there's a theme that I like but it links in a stylesheet from fonts.google which I would prefer to avoid to keep my site Google free. :-\ I accomplished it using wp_dequeue_style and wp_deregister_script. – Synetech Commented Sep 21, 2019 at 13:51

4 Answers 4

The only way to "remove" styles from the parent theme is to override them in your child theme's css.

For example if you have the following declaration in your parent theme:

.someclass{
    width: 200px;
    float: left;
 }

You can override the width and float by declaring the following in your child theme:

.someclass{
    width: auto;
    float: none;
}

I know this is old but I've been thinking about it lately. I have the same issue, if I find myself very extensively modifying the parent stylesheet, it can get to the point where I am loading an enormous number of styles, simply to override them in the child theme.

When I am dealing with this kind of project, it is usually the case that I'm doing much more modification to the CSS than to the php. I want to use a child theme for the php structure and html but the css is effectively my own. For that kind of project, instead of enqueuing the parent css, I copy it into the child theme stylesheet and then modify it, so that the only parts of the parent css that I retain are the ones I've specifically chosen to reuse.

You don't have to use a parent theme's css at all. You can custom write all the css, if you like, and only use the php templates from your parent.

The php is much more likely to have security issues than the css, which is just a formatting system, so you can rely on a tested and updated set of php /html and just format it yourself.

Effectively, yes. Unless I am misunderstanding your question, this is just basic CSS specificity. I assume you are wanting to use most of the CSS from the parent theme, but only some of it is not wanted, since the CSS isn't, by default, loaded from the parent theme.

All the normal rules of overriding or increasing specificity apply. The simplest (but most brute force) method is to just create rules that use !important to override the rules you don't want. Otherwise you should just rely on the rule cascade and specificity to properly target the things you want and set the styles you want.

There is nothing built into wordpress to filter, cut, delete or remove bits of CSS from a parent theme, if that's what you are asking.

I don't think there is a way, only workarounds.

Edit:

Explanation: By creating a child theme you are, by definition, loading the CSS of the parent theme. Therefore I don't see a way you could exclude some parts of that CSS. The only effective way would be to override it. The most straightforward way would be to use the selectors and rules you want to override, and set them to new or default values. Since child theme CSS is lower up in the "cascade" of styles than the parent CSS, there shouldn't be a need for "!important" statements and such.