• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

CSS Help

Lee

Well-known member
#1
I have a question about CSS.

I have one element that I am styling. Lets say something like:

h3 {
background: blue;
padding: 10px;
font-size: 1.1em;
}

I then have another element that I want to inherit the previous classes style but also have its own style information. For example:

h3.classname {
background: pink;
}

When I apply this class name the background colour of my H3 tag remains blue. How can I tell the class to override the default styling of the element?

Cheers,
Lee
 

Brogan

XenForo moderator
Staff member
#4
That should work as I use classes like that on my Pages.
Presumably the h3.classname is after the h3 in the stylesheet?

You could always use the !important attribute, but you shouldn't need to; for example:
h3.classname {
background: pink !important;
}
 

Lee

Well-known member
#5
Weird, doesn't work.

But, I have found a solution. If I use h3#classname and change from a class to an id in the CSS it works. This is okay as I am only using one instance of the class on the page. But I'm not sure if this is the best way to achieve what I am after. Basically, I am using this class to change the background of the h3 tags in the sidebar. Each sidebar "block" will have its own class and own unique background colour.