Why does :focus {} not affect the submit button when tabbing thru?

Hi chrishj,

I think this is the relevant css your question is referring to:

input[type="submit"] {
    width: 100px;
    height: 40px;
    border: none;
    background: steelblue;
    color: white;
    font-size: inherit;
}

:focus {
    background-color: yellow;
}

When the submit button has focus then both of those selectors will match the element. Both are trying to set the background color which creates a conflict that the browser has to resolve.

It first looks at specificity. The attribute selector has greater specificity because it has 1 type selector (the input element) and 1 class selector (attribute selectors and pseudo classes count as class selectors). The focus selector only has 1 class so it's lower in specificity. This is why the steelblue background remains. The more specific selector wins.

When specificity matches then the browser will use whichever one comes later in the css. You discovered this when you tried input:focus This selector is made up of 1 type selector and 1 class selector so it now matches the specificity of the attribute selector input[type="submit"] It's a tie with specificity so the one that comes later gets applied which is the yellow background.

Without pouring through white papers (you don't pay me enough for that ;) ha! ) I'd say it's because submit buttons belong to the "input" group of elements in HTML. They are treated different than all the other HTML elements because they actually have user interaction where all of the other HTML elements ( <a> <p> <header> etc.. ) just assist with how the page will be rendered.

Hope that makes sense :)