CODEWITHSUNDEEP
htmlcss
Candy Lee
Candy Lee

Reputation: 41

How can I combine CSS code with similar class

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>

Upvotes: 0

Views: 278

Answers (3)

Mai Van Tam
Mai Van Tam

Reputation: 17

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 class="bookedSeats"><span></span></div>
<div class="emptySeats"><span></span></div>

Upvotes: 1

SlipperyDuck777
SlipperyDuck777

Reputation: 13

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>

Upvotes: 0

Uttam Nath
Uttam Nath

Reputation: 672

HTML

<div class="bookedSeats"><span></span></div>
<div class="emptySeats"><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

Upvotes: 0

Related Questions