più elementi con css simile

Question

Ho più elementi HTML. Usano stili CSS molto simili. L'unica differenza è lo stile del bordo (un elemento ha tutto tranne il bordo sinistro, un altro tutto tranne destra ecc.).

Finora, ho creato diversi stili diversi con una sola riga di codice diversa. Quello ha seriamente gonfiato il mio file css. C'è una soluzione migliore al mio problema? C'è qualche tipo di eredità che potrei usare?

Answer 1

Ci sono molti modi per raggiungere tale.

1. Utilizzare più selettori:

   selector #1, selector #2, selector #3 { 
       /* common styles */ 
   } 
   selector #1 { border-left: none; } 
   selector #2 { border-right: none; } 
   selector #3 { border-top: none; } 
   

2. A seconda della struttura del documento si può provare qualcosa di simile:

   <ul> 
       <li>Element #1</li> 
       <li>Element #2</li> 
       <li>Element #3</li> 
   </ul> 
   
   
   ul li { 
       /* common styles */ 
   } 
   ul li:first-child { border-left: none; } 
   ul li:last-child { border-right: none; } 
   

3. Utilizzare le classi multiple:

   <ul> 
       <li class="border no-left">Element #1</li> 
       <li class="border">Element #2</li> 
       <li class="border no-right">Element #3</li> 
   </ul> 
   
   
   .border { 
       /* common styles */ 
   } 
   .border.no-left { border-left: none; } 
   .border.no-right { border-right: none; } 
   

Answer 2

È possibile dichiarare un elemento con più classi

<div class="general-class left-border-class"></div> 
<div class="general-class top-border-class"></div> 
... 

Answer 3

CSS

.border { 
    border: solid #555 2px; 
    width: 100px; 
    height: 100px; 
    } 
    .border.left { 
     border-width: 0 2px 0 0; 
     } 
    .border.right { 
     border-width: 0 0 0 2px; 
     } 

HTML

<div class="border left"></div> 
<div class="border"></div> 
<div class="border right"></div> 

Answer 4

In questo scenario particolare - in cui si dispone di elementi con diversi stili di confine - si può usare la pseudo-classe :first-child.

Demo online:http://jsfiddle.net/7WJe9/1/