I am trying to change the background for a the 'recent posts' widget in my Wordpress theme.

My problem is that Wordpress generates ids like recent-posts-2 and so on, so how can I address this id in css. I intend to create an inclusive id in css to address which includes all automatically generated IDs.

Something like:

   background-color: #eee;

which, of course does not work.

Any ideas will be appreciated.

  • Do you have multiple recent posts widgets? If not you could use CSS classes – ville6000 Dec 11 '15 at 11:57
  • yes, it is just one recent posts widget, but as I said I cannot have #recent-posts as id as the id values changes. – ajax20 Dec 11 '15 at 12:00
  • Close voted as the way this is asked is a CSS question that don't have much (or anything) to do with wordpress. In reality if your theme do not have classes for the widgets then you should fix it as that is the proper way to have general styling to widgets. – Mark Kaplun Dec 11 '15 at 15:13
  • [id^="recent-posts-"]{background-color: #eee} - learn more – Mayeenul Islam Dec 14 '15 at 10:29

Use a plugin to add custom css classes. This plugin does just that and a little more: https://wordpress.org/plugins/widget-css-classes/

For example, add the class .recent-posts to the recent posts widgets. Then you should be able to style them just like any other css class.


Ok, I seem to have found the answer to my own question with the help of the following link.

Here is the code:

li[id^="recent-posts-"], li[id*=" recent-posts-"] {

Not the answer you're looking for? Browse other questions tagged or ask your own question.