CSS Overriding Issue

[Porter]

I just up a bit more on CSS overriding, and it seems I need to be more specific with my selectors in order to achieve what I want, without using !important (I try to avoid ever using this).

Here's what I'm trying to chage:

.su-heading-style-default .su-heading-inner {
	padding: 0em;
	border-top: 4px solid #eee;
	border-bottom: 4px solid #eee;
}

I set the padding to 0, but the default of 1em 0.5em; is staying instead. I know I can wrap that entire section in yet another class, adding yet another selector, such as .testing, but I'm wondering if in this situation there are any simple additions that I could use to override this? Are there any simple selectors, or properties that help override most things?

This code is from the spacing above and below the header text, on this page - anightinburlington.com/bars/bar-test

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[bandj]

Because this style is coming from a plugin you can do a search on ways to override a plugin's css.

I found this: http://wordpress.stackexchange.com/questions/101037/how-do-i-cleanly-override-a-plugins-css-with-a-child-theme

[bandj]

btw, it looks really nice. I like it.

[bandj]

looks like that plugin has a custom css section also

[Porter]

Unfortunately, I need most of the css in that file, so I can't simply dequeue the script, as that isn't optimal. As I said, I can wrap it in a div, add a random class, and have yet another selector, which fixes the issue, it's just not as clean as elegant as I'd like. I'm essentially just looking for a super simple "ah ha!" fix. For instance, if it were text, I could simply target that with the "a" selector, but it's spacing unfortunately, so that isn't more specific.

It's not so much that I have a problem that needs fixing, it's that I want a more elegant solution, and want to know any "trade secrets" of css that might fix this seemingly simple situation. I'm looking for common selectors that aren't used, but apply, as adding ANY additional selector that applies to this css would override the plugins. Example:

What I have:

.su-heading-style-default .su-heading-inner {
	padding: 0em;
	border-top: 4px solid #eee;
	border-bottom: 4px solid #eee;
}

What I need:

.something .su-heading-style-default .su-heading-inner {
	padding: 0em;
	border-top: 4px solid #eee;
	border-bottom: 4px solid #eee;
}

Adding .something overrides it, as there's an additional selector, making it more specific - I just want to know if such a selector exists (common ones, like bold, a, links, etc).

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[bandj]

I understand what you're looking for. I don't know one. In the past I've just edited the plugin's css

[Porter]

I ended up needing to wrap the entire thing in a div tag anyway, so I went ahead and fixed it like that. That being said, I'm still curious if anyone knows any tricks for the future.

Also, thanks for the compliment on the design - it's coming along, and looking a lot better now that I'm applying some CSS to it. I'm not too skilled in the way of design, so it's nice to hear I'm making some progress on that front 🙂

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Author]

Posts