css selectors - CSS reach nested div -

is how write reach div phone in code nested divs?

css

#pagewrap #pagemain .content .colrow .container .col548 #contactinfoarea #phone {  }  

html

<!-- start: pagewrap --> <div id="pagewrap"> <div id="header">     <div class="headerwrapper">         <div id="headertopitems"> <a class="mainlink" href="../telge-energi/webbkarta/">webbkarta</a> <a href="#" class="login closed">min sida</a>             <div id="loginboxwrapper">                 <div id="loginboxbuttonwrapper">                     <div class="rounded buttonwrapper"></div>                     <div id="toploginbutton">                         <div class="rounded topleft"></div>                         <div class="rounded topright"></div>                         <a href="#" class="login open">logga in</a> </div>                     <div id="loginbuttonshadow">                         <div class="rounded topright"></div>                     </div>                 </div>                 <div id="loginbox">                     <div class="rounded topleft"></div>                     <div class="rounded bottomleft"></div>                     <div class="rounded bottomright"></div>                     <div class="formwrapper"> </div>                 </div>                 <div id="loginboxshadow">                     <div class="rounded bottomleft"></div>                     <div class="rounded bottomright"></div>                 </div>             </div>             <div class='searchform png'>                   <!--<div class="top-search png">-->                  <div id="ctl00_pageheadregion_ctl00_ctl00_quicksearch1_panel1" class="quicksearcharea" onkeypress="javascript:return webform_firedefaultbutton(event, 'ctl00_pageheadregion_ctl00_ctl00_quicksearch1_searchbutton')"> </div>             </div>         </div>         <div id="ctl00_topselectionpanel">             <div id="topselection">                  <!--<div class="menu">-->                 <div class='roundedtopleft'></div>                 <ul>                 </ul>                 <div class='rounded topright'></div>             </div>         </div>     </div>      <!-- visible te-->      <div id="topmenu">         <div class='rounded topleft'></div>         <div class='rounded topright'></div>     </div> </div>  <!-- start: pagemain --> <div id="pagemain">     <div class="content">           <!-- visible others te-->          <div class="colrow">               <!--start: left manu -->              <div id="leftmenu">                 <div id="ctl00_fullcontentregion_mainregion_submenu_emptymenupanel"> </div>             </div>              <!-- start: container -->             <div class="container">                 <div class="verticaldivider left"></div>                  <!--start: main area -->                  <div class="col548">                     <div id="topnav">                         <ul>                             <li class="active"><a href="." class="first">namn rubrik</a></li>                         </ul>                     </div>                     <img id="ctl00_fullcontentregion_mainregion_maincontentregion_mainbodyregion_image" src="../global/bilder/contact.jpg" style="border-width:0px;" /> <span>namn rubrik</span> <span>utvecklare</span><br />                     <div id="contactinfoarea"> **                         <div id="phone">**                             071-234567 </div>                         <div id="mobile"> <span>071-234567</span> </div>                         <div id="email"> <a href="mailto:namn@foretag.se"><span>namn@foretag.se</span></a> </div>                     </div>                     <span>portals &amp; web</span><br />                     <span id="ctl00_fullcontentregion_mainregion_maincontentregion_mainbodyregion_xform1_postedmessage" class="thankyoumessage"></span>                     <div id="ctl00_fullcontentregion_mainregion_maincontentregion_mainbodyregion_xform1_formpanel" class="xform"> </div>                     <br />                     <div class="contentfooter">                         <p><a href="javascript:window.print();" class="print">skriv ut</a></p>                         <p><a href="#" class="share">tipsa en vän</a></p>                     </div>                 </div>                 <div class="verticaldivider right"></div>                 <div class="col172">                       <!-- start: slidingdrawer -->                       <!-- start: spot module -->                       <span id="ctl00_fullcontentregion_mainregion_maincontentregion_secondarybodyregion_errormessage" class="errormessage" style="font-size:small;"></span> </div>             </div>         </div>     </div> </div> <div id="ctl00_pagefooterpanel">       <!-- start: pagefooter -->     <div id="pagefooter">           <!-- start: contentfooter -->          <div class="content">             <div> </div>         </div>     </div> </div> <!-- page_completed -->   <script src="../webresource.axd?d=u8ucbpv0k0iv1gypkk2bga2&amp;t=634202716197779592" type="text/javascript"></script>  <script type="text/javascript"> //<![cdata[ epi.setuppropertyobjects = function() {     epi.registerpropertyobject(window, "epiobject", {epionpageeditcontrol:"onpageeditcontrol"}); } //]]> </script> </form>  </body> 

an id unique in page, need is:

#phone { } 

if use style sheet several pages, , id might used else on other page, can example specify should apply if part of contact info:

#contactinfoarea #phone { }