Additional elements breaks CSS command

In some cases #something p, a {...} works well and in some others it effects all blocks in the site.

Assuming one has a block with the CSS ID #block-contact-form. This block has one <p> field and one <a> filed and the user wants to style both of them.

Doing p a (without the comma) doesn’t effect all elements inside the ID and thus isn’t effective in this case.

In doing p, a (with comma) the effects befall on all blocks in the site, even those that has to do nothing with contact form… This is quite wired for me. Why would this happen? Why won’t only my specific block be effected?..

I intentionally avoid giving a specific code example, to have a better understand of this general situation. It is very important for me to finally understand it conceptually. If it is really needed, I will share an example.

The answer is probably “specificity”.

IDs are heavyweights and override classes. A p with a class that is preceeded by a container wtih an IDsomething carries the weight of the ID. It cannot be overriden without resorting to something even heavier than an ID. A designeer’s best bet is to minimize the use of IDs.

http://www.sitepoint.com/web-foundations/specificity/

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

https://www.w3.org/TR/css3-selectors/#specificity

This will style all paragraphs and all anchors.

that’s equivalent to

#something p {...}
a {...}

perhaps you meant

#something p, #something a {...}

or

#something p a {...}
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.