Home › Forums › CSS › Multiple same div class, different color borders › Reply To: Multiple same div class, different color borders
December 9, 2014 at 1:34 pm
#190451
Participant
The right way: you’ll have to give each div with class “fee-items” an additional class, like:
<div class="fee-items fee-one"> (something something) </div>
<div class="fee-items fee-two"> (something something) </div>
<div class="fee-items fee-three"> (something something) </div>
<div class="fee-items fee-two"> (something something) </div>
<div class="fee-items fee-four"> (something something) </div>
…and then give the classes “fee-one”, “fee-two”, etc. a different border color.
The dirty way: you can target the classes by order. For example:
.fee-items:nth-of-type(1) {border: solid 3px #ff0000;}
.fee-items:nth-of-type(2) {border: solid 3px #00ff00;}
.fee-items:nth-of-type(3) {border: solid 3px #ff00ff;}
.fee-items:nth-of-type(4) {border: solid 3px #0000ff;}
etc. etc.
Or, if it’s just about visually separating them, you can add some spacing between them and just keep them all with the same border color.