Why not to use ID specific CSS rules:
Post ID specific CSS can only be a quick fix and it's far from the best practice. Post ID is not reliable in many cases. For example:
May be you'll delete a post and replace that with a new post.
May be you'll need to migrate your site in the future to another server.
May be you are creating a newer version of the post / page and want to review the new post / page before replacing the old one.
In all these cases, post ID is likely to change and those ID specific CSS will not be even applicable any more. So you'll have to update your CSS again to match your design needs. WordPress is extremely customizable, so there is no scenario where you have to use post ID base CSS rules. For a more mature development and design practice, using ID specific CSS rules are highly discouraged. Instead, use one of the options below:
Use Page Templates:
WordPress supports page templates for pages for a long time and from version 4.7
WordPress supports page templates for any post type. So if you you have WordPress 4.7
or later, then you may create specific page template for any posts or pages in your child theme.
This way you don't need any ID specific CSS at all, because once you have those specific templates, whenever you'll need the same design for any page or post, you'll simply have to choose the same template from the post or page editor. That's all. After that, design of that page template will apply to that page
, post
or custom post type
.
If you don't want to go to different pages or posts in the admin panel to assign specific templates (may be you have a lot of pages / posts), then you may use the post_class
filter hook. This way, you will be able to assign unique CSS classes to different posts and pages that needs them and style them based on those CSS classes. For example, say you have a custom post type movie
& you want different CSS class for movie
entries. Then in your theme's functions.php
file, you may add the following CODE:
add_filter( 'post_class', 'movie_post_class' );
function movie_post_class( $class ) {
if ( get_post_type() === 'movie' ) {
// remove these CSS classes from movie entries
$remove = array( 'css-class-to-remove', 'another-class-to-remove' );
$class = array_diff( $class, $remove );
// add these custom CSS classes to movie entries
$add = array( 'custom-movie', 'my-movie-class' );
$class = array_merge( $add, $class );
}
return $class;
}
Now you can use the following CSS to target movie entires:
.custom-movie {
background-color: gold;
}
In some situations, if you don't want to use page templates and you need more generic control over the entire page design (compared to what post_class
will provide), then you may modify <body>
class using the body_class
filter hook (in the same way that you can do with the post_class
filter hook). Like this:
add_filter( 'body_class', 'movie_body_class' );
function movie_body_class( $class ) {
if ( is_single() && get_post_type() === 'movie' ) {
// remove these CSS classes from body class
$remove = array( 'css-class-to-remove', 'another-class-to-remove' );
$class = array_diff( $class, $remove );
// add these custom CSS classes to body class of a movie post
$add = array( 'custom-movie', 'my-movie-class' );
$class = array_merge( $add, $class );
}
return $class;
}
Now you can use the following CSS to target movie custom post page:
body.custom-movie .any-inner-content-class {
color: blue;
}
Since this custom class is added in the <body>
, you can target any element within the page this way.