CSS error : div element is overqualified, just use without element name-CodePudding

i was editing my div element and all of the changes were working perfectly on visual studio code. However when i review my css code with another editor, i got this error

I always used "div#name", what do i need to change in order to prevent this error?

I changed div#poilogo to #poilogo but the codes inside #poilogo are not working. The error may be gone when i changed it to #poilogo but nothing changes.

CodePudding user response：

Change div#poilogo to #poilogo.

CodePudding user response：

Care to share what other editor you are using?

Is there any particular reason why you are including the div element? You are going to be fine using only the id.

It's over qualified because you can only have one id in your html so there's no sense in including the element#id.

The editor tells you that you should just use the "id" without including the "div".

#poilogo{ ... }

CodePudding user response：

ID element can be only one per HTML page and gets special treatment in CSS specificity, so there should be no need to add anything to #name as ID selector, so the div#name is sort of redundant (overqualified)*.

Your "not working" issue is probably not related to the editor warning.

_{* It potentially could make sense in some use cases in some templates, but such use cases are rather theoretical.}

CodePudding user response：

The reason is that # is an ID selector and html states that IDs must be unique per definition.

[..]defines an identifier (ID) which must be unique in the whole document[...] https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

That does not mean that is not possible to have multiple same IDs in a document but it is actually not compliant and valid HTML.