Where is the difference?

Question

I have this for example:
<aside id="sidebar">
</aside>

My question is, where is the difference between this:

aside#sidebar {}

and this:

#sidebar {}

And if there is a difference, then what's better?

Answer 1

Both are targeting the same element, but first get more priority ( specificity ) than second... if you write:

aside#sidebar { color:red; }
#sidebar { color:blue; }

... the color will be red, because first has higher priority and so, is not override by the second rule declaration.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://hungred.com/useful-information/css-priority-order-tips-tricks/

Answer 2

@visph, Thanks🙏