How to LESS classes in a Wordpress CSS stylesheet
Question
I'm wondering how to group or LESS classes in a wordpress CSS, for instance, I have alot more of pages to add the following style, and it's very time consuming having to copy and paste the end parts of the classes:
.page-id-16592 .header_bottom,
.page-id-16663 .header_bottom,
.page-id-16664 .header_bottom,
.page-id-16665 .header_bottom,
.page-id-16666 .header_bottom,
.page-id-16601 .header_bottom,
.postid-16728 .header_bottom,
.postid-16722 .header_bottom,
.postid-16725 .header_bottom,
.postid-16727 .header_bottom {
background-color: #222 !important;
}
I have tried to do the following with no luck:
.page-id-16592, .page-id-16663,
.page-id-16664, .page-id-16665,
.page-id-16666, .page-id-16601,
.postid-16728, .postid-16722,
.postid-16725, .postid-16727 {
.header_bottom {
background-color: #222 !important;
}
}
This allows me to add the page ids efficiently.
Appreciate your inputs.
2 answers
solution1
1 ACCPTED 2018-10-11 01:26:35
Add the following, or similar, code to your functions.php file. This will then add a class to the <body> tag for the page, when post ID is in the $ids array.
Alternatively you could modify this to target post/pages with specific custom meta attributes, or categories, etc.
add_filter('body_class', function (array $classes) {
// Prepare your target ids
$ids = [16592, 16663, 16664, 16665, 16666, 16601, 16728, 16722, 16725, 16727];
if (in_array(get_the_ID(), $ids)) {
$classes[] = 'my-custom-class';
}
return $classes;
});
Then in your CSS, you can target those specific pages using:
.my-custom-class .header_bottom {
// ...
}
solution2
0 2018-10-11 01:21:09
Can't you apply a class on all posts/pages you would like to style?
Something generic like .main
.main .header_bottom {
background-color: #222 !important;
}
or if you don't mind applying this style across all .header_bottom then simply
.header_bottom {
background-color: #222 !important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.