How To Customise A Div Element

Question

I would like to change the font-size and font-family of the #customhomelink but for whatever reason if I make changes to the #customhomelink text then the text under the div #wctopdropnav also get affected. I only wish to change the size and family for the #customhomelink. The URL to my blog is as follows: http://www.blankesque.com and I've included all the html and css coding for the hovering navigation bar below.

CSS:

#wctopdropcont{ /* width of the main bar categories */
    width:100%;
    height:45px;
    display:block;
    padding: 5.5px 0 0 0;
    z-index:100;
    top:0px;
    left: 0px;
    position:fixed;
    background:#f8f8f8;
}

#wctopdropnav{ /* social */
    float: right;
    width:97%;
    height:7px;
    display:block;
    padding:0px;
}

#wctopdropnav ul{
    float:right;
    margin:0;
    padding:0;
}

#wctopdropnav li{
    float:left;
    list-style:none;
    line-height:13px;
    margin-left: 4px;
    padding: 10px 6.5px 6.5px 6.5px;/* height of the clicked bar */
    background:#f8f8f8;
}

#wctopdropnav li a, #wctopdropnav li a:link{
    color:#000000;
    float: right;
    display:block;
    margin-left: 4px;
    text-transform: uppercase;
    font-size: 9.5px!important;
    font-family: karla, arial!important;
    padding: 5px;
    text-decoration:none;
    font-weight: normal!important;
    letter-spacing : 0.09em;
}

#wctopdropnav li a:hover, #wctopdropnav li a:active,    #wctopdropnav .current_page_item a  {
    color:black;
    font-weight: normal;
    padding: 5px;
    background: #f8f8f8;
    filter:black;  
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
    font-size: 9.5px;
    background:#f8f8f8;
    color: #000000;
    width: 90px;
    margin: 0px;
    padding: 0;
    line-height: 15px;
    position: relative;
}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
    color: black;
    background: #f8f8f8;
    filter: #f8f8f8;
}

#wctopdropnav li ul{
    z-index:9999;
    position:absolute;
    left:-999em;
    height:auto;
    width:170px;
    margin:22px 0 0 0;
    padding: 8px 0 0 0;
}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
    left:auto
}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{
    position:static
}  
#customhomelink {
    font-size: 11px!important;
    font-family: 'snickles', arial;
    letter-spacing: 0.09em;
    font-weight: bold!important;
    color: #000000;
    text-transform: uppercase;
    text-decoration: none!important;
    float: left;
}

HTML code:

<div id='wctopdropcont'>
    <div id='wctopdropnav'>
    <ul>
        <li><a href='/about/'>About</a></li>
        <li><a href='#'>Categories</a>
            <ul>
                <li><a href='/Beauty'>Beauty</a></li>
                <li><a href='/Blogging'>Blogging</a></li>
                <li><a href='/Fashion'>Fashion</a></li>
                <li><a href='/Fragrance'>Fragrance</a></li>
                <li><a href='/label/Haul'>Haul</a></li>
                <li><a href='/Lifestyle'>Lifestyle</a></li>
                <li><a href='/Skin &amp; Hair'>Skin &amp; Hair</a></li>
            </ul>
        </li>
        <li><a href='/contact/'>Contact</a></li>
        <li><a href='/policy/'>Policies</a></li>
    </ul>
        <div id='customhomelink'>
        <ul>
            <li><a href='http://www.blankesque.com'>Blankesque</a></li>
        </ul>
        </div>
    </div>
</div>

Answer 1

This should do it for you http://jsfiddle.net/mm6ck3dc/18/

#customhomelink > ul > li > a{
      color: blue;
      font-size: 11px!important;
      font-family: 'snickles', arial;
      letter-spacing: 0.09em;
      font-weight: bold!important;
      text-transform: uppercase;
      text-decoration: none!important;
}

#customhomelink  {
  float: left;
}

Answer 2

As I see in your code #customhomelink has parent #wctopdropnav Also, as I see, you have rule for parent:

#wctopdropnav li a, #wctopdropnav li a:link {
    color: #000000;
    float: right;
    display: block;
    margin-left: 4px;
    text-transform: uppercase;
    font-size: 9.5px !important;
    font-family: karla, arial!important;
    padding: 5px;
    text-decoration: none;
    font-weight: normal!important;
    letter-spacing: 0.09em;
}

but not for child. So in order to make changes to child only add this rule to your css

#wctopdropnav #customhomelink li a,
#wctopdropnav #customhomelink li a:link {
  font-size: 12px !important // put your size instead
  font-family: karla, arial!important; //your font-family here
}

Also, for future, try to avoid !important stuff in order to have better css code.

Answer 3

The problem is that you are using too many importants and they are overriding rules that in normal cases would take effect because they are more specific. The quick and dirty way to get what you want is to use:

#customhomelink > ul > li > a:link
{
   font-family: 'snickles', arial !important;
   font-size: 11px !important;
}