How can I combine CSS code with similay class-CodePudding

I have two classes which are similar, I want to combine them in CSS. Please help me.

<div ><span></span></div>
<div ><span></span></div>

<style>
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; 
}
</style>

CodePudding user response：

You can use commas to separate classes with the same properties, use spaces to write properties for subclasses. You also do not need to use the div tag when declaring the css property, if the class is only used for the div tag.

<style>
bookedSeats span, emptySeats span {
    display: none; 
    position: relative;
    color: darkblue; 
    font-family: serif;
}
bookedSeats:hover span, emptySeats:hover span {
    display: block; 
}
</style>


<div ><span></span></div>
<div ><span></span></div>

CodePudding user response：

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 ><span></span></div>
<div ><span></span></div>

CodePudding user response：

HTML

<div ><span></span></div>
<div ><span></span></div>

CSS

<style>
div.bookedSeats span, div.emptySeats span {
    display: none; 
    position: relative;
    color: darkblue; 
    font-family: serif;
}
div.bookedSeats:hover span, div.emptySeats:hover span {
    display: block; 
}
</style>

, is use to set two and more class, id combine css

Try This