find child using css

It does not work because your HTML code is invalid:

• You put a ul, a hr and a span element directly inside an ul element. This is not allowed, an ul tag can only contain li tags (and in li tags, it is allowed to put other elements such as hr and ul)
• You didn't close the ul tag

If you fix these problems, your HTML code will look like this:

<div class="k-state-border-up">
   <div class="k-tooltip-content">
      <!-- remove the <ul class="toolTipList"><ul> line here -->
      <span>Bing Ads</span>   <!-- put the span outside the list -->
      <hr></hr>
      <ul class="toolTipList">
         <li><a>Campaigns</a></li>
         <li><a>Test</a></li>
      </ul> <!-- close the tag -->
   </div>
</div>

Then, use this CSS:

.k-state-border-up > .k-tooltip-content > .toolTipList > li:nth-child(1)

Besides the invalid HTML cited by @ProgramFOX, it looks like you have misinterpreted the meaning of nth-child().

As described in the jQuery documentation (http://api.jquery.com/nth-child-selector/[^]), the :nth-child() selector counts all children of each parent, regardless of any selector attached to the pseudo-class.

So .toolTipList:nth-child(2) refers to any element having class toolTipList that is also the second child of its parent. It does not necessarily refer to the second toolTipList element.

If you meant for your HTML to be this:

<div class="k-tooltip-content">
   <ul class="toolTipList"> ... </ul>
   <hr>
   <ul class="toolTipList">
      <li><span>Bing Ads</span></li>
      <li><a>Campaigns</a></li>
      <li><a>Test</a></li>
   </ul>
</div>

then there is no element that has the toolTipList class that is also a 2nd child (the <hr> element is the 2nd child of its parent, but the toolTipList elements are 1st and 3rd children).