1

tenho algumas divs onde seus Css são iguais, porém seus identificadores são diversos devido ao Jquery.

Preciso simplificar o CSS que se repetem. É possível?

Veja que são todos iguais.

<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>

3 Respostas 3

3

Depende da situação:

1) Se existirem itens com a classe .item e que você deseje aplicar uma formatação diferente, pode separar com vírgula.

Veja seu exemplo otimizado:

<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) Se todos os elementos com a classe .item forem sofrer a mesma formatação, deve utilizar o indicado por Neuber Oliveira.

Leia mais sobre: SELETORES CSS

2

Sugiro que estude um pouco de 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;
}

Todos os elementos no seu html que tiverem a classe item vão ter o mesmo estilo. Sem saber a estrutura exata fica complicado exemplificar melhor.

Se só isso não resolver posta o HTML também.

2

Se não tiveres a utilizar a class .item em mais lugar nenhum, o recomendado seria apontar os estilos diretamente para a class .item. No entanto se estiveres a utilizá-la em múltiplos lugares, o "hack" mais simples seria adicionar uma class ou um id com um nome aleatório como elemento "parent", e inserir todo esse conteúdo dentro desse elemento.

Por outras palavras:

#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>

Ou seja, todos os .item que se encontram dentro do id #container, este estilo acima será aplicado às mesmas.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .