Declare Css for multiple identifiers

Question

I have some Divs where your CSS are equal, but your identifiers are different due to Jquery.

I need to simplify the repeating CSS. It’s possible?

See that they’re all the same.

<style>
         #owl-demo .item{
         background: #42bdc2;
         padding: 3px 0px;
         margin: 5px;
         color: #FFF;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         text-align: center;
         }
         #owl-demo2  .item{
         background: #42bdc2;
         padding: 3px 0px;
         margin: 5px;
         color: #FFF;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         text-align: center;
         }
         #owl-demo3  .item{
         background: #42bdc2;
         padding: 3px 0px;
         margin: 5px;
         color: #FFF;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         text-align: center;
         }
         #owl-demo4  .item{
         background: #42bdc2;
         padding: 3px 0px;
         margin: 5px;
         color: #FFF;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         text-align: center;
         }
         #owl-demo5  .item{
         background: #42bdc2;
         padding: 3px 0px;
         margin: 5px;
         color: #FFF;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         text-align: center;
         }
         #owl-demo6  .item{
         background: #42bdc2;
         padding: 3px 0px;
         margin: 5px;
         color: #FFF;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         text-align: center;
         }
         #owl-demo7  .item{
         background: #42bdc2;
         padding: 3px 0px;
         margin: 5px;
         color: #FFF;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         text-align: center;
         }
         #owl-demo8  .item{
         background: #42bdc2;
         padding: 3px 0px;
         margin: 5px;
         color: #FFF;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         text-align: center;
         }
         #owl-demo9  .item{
         background: #42bdc2;
         padding: 3px 0px;
         margin: 5px;
         color: #FFF;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         text-align: center;
         }
		#div1 {
		white-space: nowrap; 
		width: 100%; 
		overflow: hidden;
		text-overflow: clip; 
		}
      </style>

Answer 1

Depends on the situation:

1) If there are items with the class .item and that you want to apply a different formatting, you can separate with comma.

See your optimized example:

<style>
         #owl-demo .item, #owl-demo2  .item, #owl-demo3  .item
         , #owl-demo4  .item, #owl-demo5  .item, #owl-demo6  .item
         , #owl-demo7  .item, #owl-demo8  .item, #owl-demo9  .item{
         background: #42bdc2;
         padding: 3px 0px;
         margin: 5px;
         color: #FFF;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
         text-align: center;
         }

        #div1 {
        white-space: nowrap; 
        width: 100%; 
        overflow: hidden;
        text-overflow: clip; 
        }
</style>

2) If all elements with the class .item are subject to the same formatting, must use the indicated by Neuber Oliveira.

Read more about: CSS selectors

Answer 2

I suggest you study some CSS.

.item {
  background: #42bdc2;
  padding: 3px 0px;
  margin: 5px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

All elements in your html that have the class item will have the same style. Without knowing the exact structure becomes complicated to exemplify better.

If only this does not resolve post the HTML as well.

Answer 3

If you are not using the class .item nowhere else, the recommended would be to point the styles directly to the class .item. However, if you are using it in multiple places, "hack" simpler would be to add a class or a id with a random name as an element "Parent", and insert all that content into that element.

In other words:

#container .item {
  background: #42bdc2;
  padding: 3px 0px;
  margin: 5px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}
// continua ...

<div id="container">
  <!-- ### Novo ID adicionado como elemento parent ### -->
  <div id="owl-demo">
    <div class="item"></div>
  </div>
  <div id="owl-demo2">
    <div class="item"></div>
  </div>
  <!-- continua ... -->
</div>

That is, all the .item which are within the id #container, this style above will be applied to the same.