1

I am working with asp.net with c#.I have one stlyeSheet which use in all web forms. but for only some particular div I want to change white-space value "nowrap" to "initial"

css Class 

   .hint:after, [data-hint]:after {
        content: attr(data-hint);
        background: #383838;
        color: white;
        padding: 8px 10px;
        padding: 15px;
        font-size: 12px;
        line-height: 12px;
        /*white-space: initial;*/
        white-space: nowrap;        
        max-width: 300px;           
    }

HTML control which i want to change this css class

 <div id="noteDiv" class="home_watchlist_colmn  col_Note hint--bottom" data-hint="<%#Eval("Note")%>">
   <div class="note_detail">
      <%#Eval("Note")%>
   </div>
 </div>

data-hint is for tool tip.This div inherit the given class. I want to change white-space for this "noteDiv".

Please provide proper solution with code.

Rob
  • 26,989
  • 16
  • 82
  • 98
kinjal
  • 33
  • 8

1 Answers1

2

Match against the id using #

#noteDiv {
    white-space: initial
}

or

#noteDiv:after {
    white-space: initial
}

If you need to overwrite the first block of CSS you mentioned.

Novocaine
  • 4,692
  • 4
  • 44
  • 66
  • this is not working!! still apply style from ".hint:after, [data-hint]:after" – kinjal Sep 22 '15 at 13:51
  • Thanks for giving solution. `#noteDiv:after { white-space: initial }` work for me. Can you please explain in detail how this work? – kinjal Sep 22 '15 at 13:59
  • There's not much to it. in CSS `#` matches an id, and your original css already had an `:after` selector, so it needed to match – Novocaine Sep 22 '15 at 14:10