Combining CSS selectors with multiple page id’s

How can I combine:

#page1 .mainmenu {
  padding: 20px;
  display: block;
  margin-bottom: 30%;
}

with

#page2 .mainmenu {
  padding: 20px;
  display: block;
  margin-bottom: 30%;
}

I need to specify around 9 pages or so that all share the .mainmenu class. I’m using jQuery mobile and it doesn’t work without the #page1/2/3/4 etc selector.

I appreciate this is a basic question but I just can’t find the answer.


solution

Add a , between #page1 .mainmenu and #page2 .mainmenu.

Like this.

#page2 .mainmenu, #page1 .mainmenu {
  padding: 20px;
  display: block;
  margin-bottom: 30%;
}

or

.mainmenu {
  padding: 20px;
  display: block;
  margin-bottom: 30%;
}

Will select all with the class .mainmenu regardless of the page id.