Have you sat back and thought to yourself something like this “It would be nice if our header was red on this page”? I’m sure you’ve wondered something similar at some point in time, so let me let you in on a little secret it super easy to do this, as WordPress has little CSS classes that will allow you make such changes quite simply. Today I just want to share these CSS classes with you.
These are some examples of what the main WordPress CSS classes look in action
CSS Snippet
.home{
/*Some CSS*/
}CSS Snippet
.page-id-9999{
/*Some CSS*/
}CSS Snippet
.postid-9999{
/*Some CSS*/
}The first example is the homepage, the second is what the page class will look like and the third one is an example of what a post CSS class will look like.
Know that you know this kind of CSS classes exist you probably wondering how you can find your page or post CSS class.
If you can’t see the image properly just give it a click and it will enlarge, to find your page or post CSS class all you need to do is to right click and go inspect or developer tools or whatever your browser calls it.
Once you’re inspect element or developer tools are open, scroll top of the HTML code until you get to the body, you will notice the body has a bunch of classes attached to it, you’ll just need to look for the one which starts with page-id- or postid- they will be followed by number, just copy it and paste it into your CSS, you will need to put a full stop in front of it.
Now that I’ve shown you the slightly harder way of finding a page or post id let me show you easier option to find just the number that the class will have at the end.
The second option is quicker because all you have to do is look at the top of the post or page you are editing in the URL bar towards the end you will see a bunch of numbers that is the page or post id, you will just need to manually write the rest of the CSS class and add the numbers to end of the class.
Here a working Example, we changed element for this post
CSS Snippet
.postid-49770 #main-header{
background:#1e1e1e;
}
.postid-49770 #main-header .menu-item{
color:#d76000;
}What about custom post types?
Custom post types use the same CSS class as a normal post dose (postid-9999) so there nothing really special about using custom post types but let say you wanted to hide a global element in your custom post type or even on one of the normal post types, WordPress has you covered.
Here what your custom post type class will look like.
CSS Snippet
.single-mycustomposttype{
/*Some CSS
}Here are more WordPress & WooCommerce classes
CSS Snippet
.page{
/*Some CSS*/
}CSS Snippet
.single-post {
/*Some CSS*/
}CSS Snippet
.category{
/*Some CSS*/
}CSS Snippet
.category-20{
/*Some CSS*/
}CSS Snippet
.category-your-category {
/*Some CSS*/
}CSS Snippet
.single-product{
/*Some CSS*/
}That pretty much all the major CSS WordPress classes you will need to create different styled page items with CSS but since I know most of my audenice are from the Divi community, it’s only fair that I share some of the little hidden Divi classes with them, these are the styles that get added when you select a specific style in the customizer, or you when you use the page builder and also divi adds a browser and OS class, so here are the Divi CSS classes.
CSS Snippet
.et_pb_pagebuilder_layout {
/*Some CSS*/
}CSS Snippet
.et_right_sidebar {
/*Some CSS*/
}CSS Snippet
.et_left_sidebar {
/*Some CSS*/
}CSS Snippet
.et_vertical_nav {
/*Some CSS*/
}CSS Snippet
.et_boxed_layout {
/*Some CSS*/
}CSS Snippet
.et_header_style_centered {
/*Some CSS*/
}CSS Snippet
.single-project {
/*Some CSS*/
}CSS Snippet
.osx {
/*Some CSS*/
}CSS Snippet
.windows {
/*Some CSS*/
}CSS Snippet
.chrome {
/*Some CSS*/
}CSS Snippet
.gecko {
/*Some CSS*/
}CSS Snippet
.logged-in {
/*Some CSS*/
}Knowing these CSS classes have come in handy for time and again, most of the time you will need to add a few together to achieve your desired look, The Divi Commerce plugin took makes use of the Divi classes to restyle the tabs container width to be 100% of the screen width.