CSS specificity selector: element selector overrides pseudo class

Im new in CSS, i was learning about CSS element specificity, and I know that at the end the selector with more specificity will be applied, but how about this case:

this supposed to be more specific

    header: first-child {
        color: red:
    }

why is not applied???

Specificity only affects the element that is selected.

h1 { color: blue; } is not competing with header:first-child { color: red; } because they target different elements.

h1 { color: blue; } is competing with h1 { color: inherit; } from the browser's default stylesheet (and wins because author stylesheets beat browser stylesheets).