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

So Im changing some of the styling on an existing woocommerce theme. Using software called CSSHero and my console I am able to get the ID and classes for certain elements. Most of the changes are either at a global level or page specific. Should I reference the ID and Class or just the ID or only the Class… I am finding that #ID .Class works ok or #ID or even .Class.Class.Class as that is what is appearing in the hierarchy (for example some of the Classes for an element will say: Class=“footer-text year-copyright color-main” something like that. Then the console will show #ID.footer-text.year-copyright.color-main. If I use the last part of the class some times it doesnt work, I have to use the entire class name. Hope that makes sense. Im trying to get as close to the root element as I can but some of the CSS validators are saying “Dont use adjoining classes” when I dont have any other way to drill down further. Thoughts on this? Would appreciate some help. Thanks

I think it might help for you to do some playing 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 which have class1 AND class2 defined on them
• .class1 > .class2 selects all instances of class2 ONLY if they are directly inside of class1

Here is a REALLY quick and dirty example codepen

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

CSS Specificity Demo

An interactive demo that illustrates how specificity in CSS works

1 Like

Thanks! That really helped out. Is one method preferred over another? Why when I have class1.class2 cant I use just .class2? Or why in some instances do I have to use the #ID selector for it to work? So in a global perspective – across the entire site I should us the #ID selector and for page specific, the .Class selector? Thank you!

The CSS validator gives warnings for two classes used together or ID and class together. I guess what Im asking on that is it sometimes unavoidable to structure it that way or should I be finding a better way to access the element – if its possible since the theme was made by someone else?

DaveMaxwell:

• .class1 .class2 would select all instances of class2 that are contained INSIDE all instances of class1
• .class1.class2 would select all instances which have class1 AND class2 defined on them

I have 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 right? If so can you explain why .class1 .class2 may not work but .class1.class2 does work and vice versa? Thank you.

PaulOB

September 2, 2022, 7:28am
#5

pityocamptes:

I have noticed that a space between the two classes may or may not work

Dave gave you the answer to that

DaveMaxwell:

.class1 .class2 would select all instances of class2 that are contained INSIDE all instances of class1

.class2 would be contained inside an element inside class1.

e.g.

.class1 .class2{color:red;}

<div class="class1">
  I am not red
  <div class="class2">
     I am red
  </div>
</div>

As opposed to:

.class1.class2{color:red;}

<div class="class1 class2">
  I am red
</div>

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

In the html classes on the same element are separated by spaces which is where you might be confused.

<div class="class1 class2 class3">

Thanks for the clarification!!