Multiple same div class, different color borders

[king1889]

Hi,

I have different multiple fees however using the same div class of “fee-items”. To visually separate the different fees to the customer, how can I style each fee with a different border color?

Please view the screenshot on my site below.
http://s.dev25.com/1.png

Thank you,
Elvis

[Senff]

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.

[king1889]

Thank you Senff. The dirty way worked. Screenshot: http://s.dev25.com/2.png

The fees are dynamically generated according to shipping country. How can I create the styling with this in mind?

[Author]

Posts