CSS - styles Color not taking for anchor tag when using elipsis but taking same color which is using for main div class

Question

NOTE : CSS Color not taking for anchor tag when using elipsis but taking same color which is using for main div class

JS FIDDLE DEMO HERE :

CSS :

<style type="text/css">
    .oneline {
        text-overflow : ellipsis;
        white-space   : nowrap;
        width         : 50px;
        overflow      : hidden;
        color: #f00;
     }
    a {color:#000;}
</style>
<div class="oneline">

    Testing 123 Testing 456 Testing 789 <br/>
    <a href="">Testing 123 Testing 456 Testing 789</a>
</div>

Answer 1

Try adding an extra element around text. Since you have given it to parent element it consider the ellipsis color as paretnt element text color.

HTML

<div class="oneline">    
    <span>Testing 123 Testing 456 Testing 789</span> <br/>
    <a href="">Testing 123 Testing 456 Testing 789</a>
</div>

CSS

.oneline span, .oneline a {
        display:block;
        text-overflow : ellipsis;
        white-space   : nowrap;
        width         : 50px;
        overflow      : hidden;
        color:#f00;
     }  
    .oneline a {       
        color:#000
  }

DEMO

Answer 2

You have set color black for all elements with 'a' tag.

To give a specific color to a specific element 'a' tag, use classname with 'a' tag and specify the color you want.

Answer 3

Try:

.oneline,.oneline a{color: #f00;}

Updated fiddle here.