How can I combine CSS code with similar class

Issue

I have two classes that are similar, I want to combine them in CSS. How can I do so?

Here's my code:

div.bookedSeats span {
  display: none;
  position: relative;
  color: darkblue;
  font-family: serif;
}

div.bookedSeats:hover span {
  display: block;
}

div.emptySeats span {
  display: none;
  position: relative;
  color: darkblue;
  font-family: serif;
}

div.emptySeats:hover span {
  display: block;
}

<div class="bookedSeats"><span></span></div>
<div class="emptySeats"><span></span></div>

Solution

Youc ould make it one class for all seats, and then add a secondary class for the areas which they differentiate.

CSS:

div.Seats span {
    display: none; 
    position: relative;
    color: darkblue; 
    font-family: serif;
}
div.Seats:hover span {
    display: block; 
}

.Booked {
/* Add CSS that differs from Empty */
}

.Empty {
/* Add CSS that differs from Booked */
}

HTML:

<div class="Seats Booked"><span></span></div>
<div class="Seats Empty"><span></span></div>

Answered By - SlipperyDuck777