Your selectors should be as simple as possible.
OK. I think this is like that “you shouldn’t use tables” thing again. Some how it we well meaning phrase that no gets interprted so that I even get clients asking me NOT to use table’s for tabular data… because “you shouldn’t use tables in your web pages”
I would phrase it this way : Use the lowest number of selectors to reach the desired element, keeping in mind specificity conflicts. Yeah, not as noob friendly off the bat, but a good compromise.
Here is what I mean:
-
AFTER you have written your mark up!! decide which element you need to style.
-
Any element you only use once… you could style with a unique class , or BETTER yet an ID. ( I favour the latter)
div .someClass #myID .otherClass p{} /*unless you have specificity conflicts… anything before the ID is redundant */
#myID .otherClass p{} /* is better, again unless you are trying to resolve specificity conflicts OR you want to style the ONLY the Ps within .otherClass differently, this is too long}
#myID .otherClass {} /* and this would be more suited*/
/* but what is there were a SPAN with the P we wanted to target? agin we most ask questions… how wide is SCOPE of SPANs we want to target ? */
#myID span {} /*all spans? then this is it… anything else is too much. */
#myID p span {} /*ONLY those spans in paragraphs ? then this is it… anything else is too much. */
#myID .otherClass span {} /*ONLY THOSE spans in within .otherClass ? then this is it… anything else is too much. */
#myID .otherClass p span {} /*ONLY THOSE spans in paragraphs within .otherClass ? then this is it… anything else is too much. */
what if you only wanted to target SOME spans?
#myID .targetedSpan {}
OR
#myID p .targetedSpan {} /*if you ONLY needed target spans in paragraphs.
OR
*/#myID .otherClass .targetedSpan {} /*if you ONLY needed target spans ANYWHERE within .otherClass when it’s wrapped #myID */
Notice that this methodology, tho it takes more conscious thought( but that’s why you are asking questions right?) also helps you avoid adding classes to every tag in the mark up.
I you know you are styling all SPANs within As in a #mainMenu (UL)… why add classes in the HTML?
#mainMenu span{} will get u there.
If there is an oddball SPAN hit it with: #mainMenu .oddBall{}
voila!
Again if you have painted yourself in a corner an created a specificity conflict you JUST CANT RESOLVE with good code ( tho using this method should help you avoid that…) THEN you can add a selector anywhere to help…
for example:
#myID div.otherClass p span {}
or
div#myID .otherClass p span {}
or WTH did you do to deserve this!???!
div#myID div.otherClass p span {}
hope that helps