Code by Day | Explore By Weekend

How To Target A Specific Page or Post Type In Divi with CSS Tutorial by Pee-Aye Creative

How To Target A Specific Page or Post Type With CSS In Divi

Sometimes you need to target a specific page or item on a page of your Divi website with CSS. This short tutorial will show you how to do that very easily!

1. Target Individual Pages or Posts With CSS

The best way to target a specific page with CSS in Divi is to first find the ID of the page. This can be found in several ways.

A. Find Page ID From the “Edit Page” slug

The simplest way to find the CSS class of the page you want to target is to find the page ID in the slug of the page editor. This is super easy to find. Just go to the page you want to target, edit the page, and look in the address bar for something like this: https://yourdomain.com/wp-admin/post.php?post=291&action=edit

Do you see any numbers? That’s right! The page ID that you need for your CSS is right there, 291.

So how would this be used? The number gets added to the CSS selector of “.page-id-“ and becomes “.page-id-291”

So an example would be like this:

.page-id-291 {
background: red;
}

Now this page is the only page on your website that will have the background color of red applied to it. This can be very handy for targeting more specific elements on your page like the header or menu item.

NOTE: For blog posts, it will be very similar, but the CSS selector will be “postid-“ instead, so for example “.postid-52”

B. Find Page ID Using the browser’s Inspect tool

This other method is for those how are familiar with the browser inspect tool. When you right-click on your website, you will see something like “inspect” or “inspect element.” Click on that and look for a button in the new, scary-looking code popout that looks like a mouse pointer. Select that pointer and click something on the page. Then, in the code popout, look for something near the top that starts with this:

<body class=”page-template-default page page-id-291 etc. etc.

Did you notice it? There it is, the “.page-id-291” that we need to target this Divi page with CSS. You can apply your CSS the same way as in the previous example.

Again, this is the same for blog posts. Just look for the “postid” on in the code.

15
Last updated Jan 3, 2021 @ 1:13 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart