If you are new to blogging or using WordPress for the first time, you may need to make small changes in your WordPress files mostly CSS related. Specially WordPress themes extensively use CSS for styling different elements.

An important concept to master is to know what is the difference between CSS id and class selectors and how to use them in WordPress Theme Customizer.

Although not mandatory but it’s always a good idea to learn basics of CSS to fix minor issues yourself. Please see how to find and edit CSS in WordPress for detailed information on CSS.

Id and Class Selectors

CSS id and class selectors are used to style web page elements by changing class properties either in sytlesheet or WordPress theme customizer.

  • A dot (.) is used as a class selector followed by the class name. For example, to change any property of a class xyz, the class selector will be used as:

.xyz{ property:value; }

The code above will affect all elements using xyz class in your theme.

  • A hash (#) is used as an id selector followed by the id name and class. For example, to change any property of a class xyz under an id abc, both id and class selectors will be used as:

#abc .xyz{ property:value; }

Although many elements might be using the same xyz class but the code above will only affect the element using the id abc in your theme.

Ids are unique and can’t be used multiple times. Each web page element should have its own id.

Woopoo's Tip

CSS Selectors Example

Let’s see a practical example now. Using Twenty Seventeen WordPress theme, we will see how to hide a widget title but the same steps can be used with any theme.

You also need to know how to use Chrome DevTools (Inspect) to find CSS classes in WordPress, see our article how to find CSS class for more details.

In the image below, you can see that multiple <h2> tags are using the same class widget-title for displaying widget headings in the sidebar. Changing any CSS property of widget-title class will affect all widgets.

div id vs div class selectors

  • CSS property display: none can be used to hide web page elements.
  • From your WordPress dashboard, go to Appearance > Customize > Additional CSS and add the following code:

.widget-title { display:none; }

  • Remember adding a dot prior to a class name will make it a class selector?

hiding widget code wordpress

  • Press Save & Publish button at the top.

Adding the above code will hide all widget headings.

To hide heading for only one widget, we have to find and use its id selector CSS code. For example, to hide the title for only Archives widget, we will note it’s id which is archives-2.

widget id selector

  • Add the following code:

#archives-2 .widget-title { display:none; }

The code above will only hide the Archives widget heading and leave all other headings intact because we use # id selector to restrict the code to affect only the archives widget class.

Similarly, same id and class logic can be used for any elements where you want to affect only a specific element of your website. For example, you can change font size, colors etc of any element of your web page to enhance its visibility or for other purposes.

Additional Reading

5 PHP mistakes to avoid in WordPress

Remove Proudly Powered by WordPress Footer in 2017

Absolutely Important settings to do after installing WordPress

Conclusion

I hope you found this article useful to know the relationship between CSS id and class selectors and how to use them in WordPress.

If you still have any questions, do let us know using the comments section below and don’t forget to follow us on Twitter and Facebook

Gimme a Share pleeeaase!

Pin It on Pinterest

Share This