html - How to give 2 different colours of the font to the vertical text, in order to text 1 and text 2 was in one "div class"? -


two texts saved on "background-color: blue" test. have 2 "div class":

1) vertical-text1 (text color ---> white)

2) vertical-text2 (text color ---> yellow + font-weight: bold)

my code:

<div class="video_info">     <div class="vertical-text1">text 1</div>     <div class="vertical-text2">text 2</div> </div>   .video_info {     position: fixed;     left: 30px;     top: 70%; }  .vertical-text1 {     transform: rotate(-90deg);     color: white;     background-color: #0000ff;     position: absolute;     left: -190px;     top: -215px;     width: 400px; }  .vertical-text2 {     transform: rotate(-90deg);     color: yellow;     font-weight: bold;     background-color: #0000ff;     position: absolute;     left: -40px;     top: -350px;     width: 100px; } 

how give 2 different colours of font vertical text, in order text 1 , text 2 in 1 "div class"?

i don't think can have 2 elements different styling without making them different somehow. can move common styling inside class , leave individual styling is, separate each element (using ids), there no duplicate code.

<div class="video_info">     <span id="vertical-text1" class="vertical-text">text 1</span>     <span id="vertical-text2" class="vertical-text">text 2</span> </div>  .video_info {     position: fixed;     left: 30px;     top: 70%; }  .vertical-text {     transform: rotate(-90deg);     background-color: #0000ff;     position: absolute; }  #vertical-text1 {     color: white;     left: -190px;     top: -215px;     width: 400px; }  #vertical-text2 {     color: yellow;     font-weight: bold;     left: -40px;     top: -350px;     width: 100px; } 

Comments

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -