Search code examples
csscss-selectorscss-specificity

Code on lower line number is taking priority over code on a higher line. Why?

I am trying to figure out why this code is taking a priority over subsequent code in the stylesheet.

/* Line 612 */
input[type='submit'], input[type='button'], button { 
    background-color: #d3dce0;
    border: 1px solid #787878;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    padding: 7px;
    margin-right: 8px;
    width: auto;
}

The following should change the border and background color right?

/* Line 764 */
.fakelink {
    border: 0px;
    color: blue;
    background-color: transparent;
    margin-top: 0px;
    margin-bottom: 0px;
}

Currently the border and background is still what line 612 describes. I want it to be what describes 764 has. Is there a way to override line 612 without changing it?

Solution

  • More specific selectors will always take priority, regardless of weather they are above or below other rules for the same element. In your case, the type attribute is seen as a more specific selector than a class, therefore it gets priority.

    Further reading here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    You can workaround this by using the same level of specificity on the rule you need to have priority. In your case, something like this should work:

    input[type='submit'].fakelink{ ... }