Home/ Questions/Q 6119943
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:36:41+00:00

I’m having trouble with a css stylesheet. I’ve narrowed it down to be about

  • 0

I’m having trouble with a css stylesheet. I’ve narrowed it down to be about inheritance and specificity in the css styles.

Right now (simplified) I’ve got an HTML <body> that looks like the following:

<div id="page-wrap">
    <div class="unilogin-wrap">
        <h1 class="unilogin-h1">Hello world!</h1>
    </div>
</div>

Now, this is part of a uni-login form that needs to be used on several websites and therefore it has a seperate stylesheet for the specific unilogin style. However in the website stylesheet (style.css) the following is set:

#page-wrap h1{
    font-size:18px;
    margin-bottom: 18px;
    margin-left:15px;
}

And in the unilogin stylesheet (unilogin.css) the following is set:

.unilogin-wrap h1.unilogin-h1 {
    padding:0;
    margin:0;
    font-size:18px;
    color:#596168;
    text-shadow: 1px 1px 0px #fff;
}

However this won’t override the inherited h1 style from style.css. If I put #page-wrap h1.unilogin-h1{} instead it works just fine. This is not an option though because it has to work on several websites all with different stylesheets that I can’t just change.

Is the any way to override the specificity of the inherited h1 style in the second stylesheet without using inline html styling? (I know that the style=”” html attribute has higher specificity, but I prefer to keep the styles in a stylesheet).

Thanks…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try changing .unilogin-wrap h1.unilogin-h1 {

    to

    #unilogin-wrap h1.unilogin-h1 {

    since .unilogin-wrap acts on <whatever class="unilogin-wrap" and #unilogin-wrap on <whatever id="unilogin-wrap"

    • 0