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

CSS Help

Discussion in 'XenForo Questions and Support' started by Lee, Feb 17, 2011.

  1. Lee

    Lee Well-Known Member

    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?

  2. Brogan

    Brogan XenForo Moderator Staff Member

    Are you using <h3 class="...."> when creating your markup?
  3. Lee

    Lee Well-Known Member

    Yeah, sorry should of said that.
  4. Brogan

    Brogan XenForo Moderator Staff Member

    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;
  5. Lee

    Lee Well-Known Member

    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.

Share This Page