Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Multiple same div class, different color borders Reply To: Multiple same div class, different color borders

#190451
Senff
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.