Declare Css for multiple identifiers

Question

Declare Css for multiple identifiers

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (2 votes)

2

I have some divs where your Css are the same, but their identifiers are different due to Jquery.

I need to simplify the CSS that repeat. Is it possible?

See that they are 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>

css css3

asked by anonymous 31.08.2016 / 00:53

3 answers

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 class item will have the same style. Without knowing the exact structure it is difficult to exemplify better.

If this does not solve the HTML problem, too.

31.08.2016 / 01:22

2

If you do not have to use the .item class anywhere else, the recommendation would be to point the styles directly to the .item class. However, if you are using it in multiple places, the simplest " hack " would be to add a class or an id with a random name as 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 .item that are within id #container , this style above will apply to them.

31.08.2016 / 01:38

How to go through Enum in Java What is the linux text editor command that I can see output in real time?

score 4 · Accepted Answer

Depends on the situation:

1) If there are items with class .item and you want to apply different formatting, you can separate it with a 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 class .item have the same formatting, you should use the one indicated by Neuber Oliveira.