CSS Specificity explained
Why Stack Overflow recommends it
Stack Overflow users link it when answering CSS questions where a rule is being overridden and the asker needs to understand specificity and rule order.
Recommended by 3 people across 3 different months, 2018 to 2022.
What it is
A 13-minute explainer from Kevin Powell on how CSS specificity works. It covers how weight is calculated from tags, classes, IDs and inline styles, where !important fits in, and how to avoid specificity wars.
What people said
Recommends Facundo Corradini · 2018-01 · Stack Overflow · on “Design breaks in every resolution - I think I might be positioning things wrong”
Position:absolute is (almost) never the way. You got yoursef into a labyrinth you're not gonna be able to get out, no matter how many media queries you try. By setting everything to position:absolute you're removing everything from the flow , so basically making it ridiculously specific. Things should be able to position themselves automatically bellow others ( display:block , clears, etc) or side-by side (floats, inline-blocks, flex, grid, etc) without recurring to strict positioning with left , top , etc. Most of the times making an element responsive is easy as switching the display from an inline-block, flex, etc to display:block. On grids is just using auto-fit or auto-fill, or adjustin
Recommends A 'dumb' person · 2021-07 · Stack Overflow · on “BEM: how to make sure rules of the right class (parent block) take precedence?”
order matters in css for example if I add .menu after .menu__social then .menu` will get applied (if they target the same css property) for more information check out this video by kevin powell linked here [this video]
Recommends Adam · 2022-08 · Stack Overflow · on “Css failed to set green color on hover on the first row, while it's working on the last row after adding my Javascript code”
It looks as though the javascript isn't affecting it (but I'll check this). On a table the first row is the one containing the headings (i.e. the th tags). The css rule that's styling the th elements is overriding the table tr:first-child:hover rule because the th elements appear on top of the tr element. If you remove the table th rule, the change of colour on the top row works. If you want the row that has $520 in the first column to change colour on hover then use the nth-child(2) pseudo class. The rules tagged 'THIS IS WHAT DOESN'T WORK' and 'AS WELL AS THIS' don't work because the nth-child(odd) and nth-child(even) rules appear after these two rules and in css the last rule 'wins'. If y
Cites Adam · 2022-12 · Stack Overflow · on “is there a way to adjust an already defined margin of an element”
Use window.getComputedStyle (detailed in MDN [LINK] ) to work out the left margin in pixels and then subtract your intended margin and add it to the element style property. Because the style property has higher specificity [this video] than the css, it overrides it. Use the mouseout to remove it and it defaults to the css value: window.onload = () => { const elements = document.querySelectorAll('div'); elements.forEach((element) => { element.addEventListener('mouseover', doMouseOver); element.addEventListener('mouseout', doMouseOut); }); } function doMouseOver(e) { const marginLeftShift = -25; const style = window.getComputedStyle(e.target); const computedMarginLeft = style.marginLeft; e.target.s