Css style

When changing the CSS of an existing theme (Woocommerce) is it better to use ID and Class…? – HTML & CSS – SitePoint Forums

So I’m changing part of the style on an existing woocommerce theme. Using software called CSSHero and my console, I can get the ID and classes of some items. Most changes are either global or page specific. Should I refer to the ID and the class or just the ID or only the class… I find that #IDENTIFIER .Class works fine or #IDENTIFIER or even .Class.Class.Class because that’s what shows up in the hierarchy (eg some of an element’s classes will say: Class=”footer-text year-copyright color-main” something like that. Then , the console will show #IDENTIFIER.footer-text.year-copyright.color-main. If I sometimes use the last part of the class, it doesn’t work, I have to use the full class name. I hope that makes sense. I try to get as close to the root element as possible, but some of the CSS validators say “Don’t use adjacent classes” when I have no other way to dig deeper. Any thoughts on this? I would appreciate some help. Thanks


I think it might help you to play around with selectors and specificity.

  • if you want to select ONE element on a page, use the id (#) selector
  • if you want to select all instances of an element on a page, use the class (.) selector
  • .class1 .class2 would select all instances of class2 that are contained INSIDE all instances of class1
  • .class1.class2 would select all instances where class1 AND class2 are defined
  • .class1 > .class2 selects all instances of class2 ONLY if they are directly inside class1

Here is a REALLY fast and dirty codepen example

But I also have this link I found that does a great job of building specificity and explaining each level



1 like

Thanks! It really helped. Is one method preferred over another? Why when I have class1.class2 I can’t just use .class2? Or why in some cases do I have to use the #IDENTIFIER selector to make it work? So from a global perspective – across the whole site, I should #IDENTIFIER selector and for a specific page, the .Class selector? Thanks!

The CSS validator gives warnings for two classes used together or ID and class together. I guess what I’m asking about this is it sometimes unavoidable to structure it this way or should I find a better way to access the element – if it’s possible since the theme was created by someone anyone else?

I noticed that a space between the two classes may or may not work, and they have to be right after each other. Does that sound good? If so, can you explain why .class1 .class2 may not work but .class1.class2 does and vice versa? Thanks.

Dave gave you the answer to that :slight_smile:

.class2 would be contained on the inside an element inside class1.

for example

.class1 .class2{color:red;}

I am not red
I am red

Unlike:

.class1.class2{color:red;}

I am red

A space (in the css selector) is the descendant selector and should be one of the first things you learn in css otherwise you cannot select descendant elements based on a parent.:slight_smile:

In HTML classes on the same element are separated by spaces where you might get confused.