How do I add two CSS rules to one html element

Question

 <p class="smallText">{{vehicleItem.registration}}, {{vehicleItem.colour}} {{vehicleItem.make}} {{vehicleItem.model}}</p>

I'd like to capitalize vehicle registration and model and make should be camel case

Please see how to ask a question to ensure you can get an appropriate response: https://stackoverflow.com/help/how-to-ask — Bobby Speirs, Jun 19 '17 at 13:18

score 1 · Accepted Answer · answered Jun 19 '17 at 13:26

I will suggest wrapping registration and make with a span containing different classes e.g.

<p><span class="capitalize">{{vehicleItem.registration}}, {{vehicleItem.colour}} <span class="camel-case">{{vehicleItem.make}} </span> {{vehicleItem.model}}</p>

This way you are adding "two" css rules to one element. I also recommend you achieve the camelcase style using Javascript.

score 0 · Answer 2 · answered Jun 19 '17 at 13:28

0

You can write as many classes into an HTML tag as you want, thereby applying as many CSS rules as you want. Example:

<p class="smallText myclass_1 myclass_2">

answered Jun 19 '17 at 13:28

Johannes

64,305
18
73
130

score 0 · Answer 3 · answered Jun 19 '17 at 13:29

I'm not experienced with angular but you should be able to use different functions like

capitalizeFirstLetter(vehicleItem.registration)

and camelize(vehicleItem.model)

Converting any string into camel case

How do I make the first letter of a string uppercase in JavaScript?

How do I add two CSS rules to one html element

3 Answers3