Is it better to use ids and classes when modifying the CSS of an existing theme (Woocommerce)? – HTML and CSS – SitePoint Forum

So I am making some style changes to the existing woocommerce theme. You can get the id and class of a particular element using a piece of software called CSSHero and a console. Most changes are either global level or page specific. Should I reference the ID and the class, the ID only, or the class only? #ID .Class works fine or #ID Or even .Class.Class.Class is what it appears in the hierarchy (e.g. part of the element’s class says: Class=“footer-text year-copyright color-main” Something like that. Then the console shows #ID.footer-text.year-copyright.color-main. Sometimes the last part of the class doesn’t work, you have to use the whole class name. Hope that makes sense. I’m trying to get as close to the root element as possible, but some CSS validators say “don’t use adjacent classes” if there’s no other way to drill down further. Any thoughts on this? Any help would be appreciated.Thank you

I think playing around with selectors and specificity might help.

• To select one element on the page, use the id (#) selector
• If you want to select all instances of an element on the page, use a class (.) selector
• .class1 .class2 selects all instances of class2 contained within all instances of class1.
• .class1.class2 selects 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 very quick and dirty codepen example

But there is also this link I found.It does a great job of building specificity and explaining each level

thank you! It really helped.Do one method take precedence over another? Why can’t we just use .class2 when we have class1.class2? #ID Selector for it to work?So from a global perspective, across the site #ID Selectors and page-specific .Class selectors? Thanks!

The CSS validator will warn you if you use two classes together, or if you use an id and a class together. I guess what I’m asking is that sometimes structuring it that way is unavoidable, or that I need to find a better way to access the elements – if the theme is someone else’s If possible because it was created by

I’ve noticed that the space between the two classes may or may not work and they have to be right after each other. Is that so? If so, can you explain why .class1.class2 works while .class1 .class2 doesn’t and vice versa? Thanks.

Dave gave you the answer to that

contains .class2 inside An element within class1.

for example

.class1 .class2{color:red;}

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

In contrast to:

.class1.class2{color:red;}

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

Spaces (in css selectors) are descendant selectors and one of the first things to learn in css. Otherwise you won’t be able to select descendant elements based on their parent.

in html class of the same element It can be confusing because they are separated by spaces.

<div class="class1 class2 class3">

Thanks for clarifying!!

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