Style the first Letter, of the first Link, in the first List - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Element

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL Element

Description

Style the first Letter, of the first Link, in the first List

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
a {<!--from  w w w .j ava2  s. com-->
   display:inline-block;
}

.tab-pane .category-headings .span4:first-of-type li:first-of-type a::first-letter {
   margin-right:2px;
   padding:0px 6px;
   background-color:Chartreuse;
   color:yellow;
   font-weight:bold;
}
</style> 
 </head> 
 <body> 
  <div class="tab-pane" id="b"> 
   <div class="container-fluid category-headings"> 
    <div class="row-fluid"> 
     <div class="span11 offset1"> 
      <div class="row-fluid"> 
       <div class="span4"> 
        <ul class="unstyled"> 
         <li> <a href="">Lorem ipsum dolor sit a</a> </li> 
         <li> <a href="">Lorem </a> </li> 
        </ul> 
       </div> 
       <div class="span4"> 
        <ul class="unstyled"> 
         <li> <a href="">Lorem ipsum </a> </li> 
         <li> <a href="">Lorem ipsum dolor si</a> </li> 
        </ul> 
       </div> 
       <div class="span4"> 
        <ul class="unstyled"> 
         <li> <a href="">Lorem ip</a> </li> 
         <li> <a href="">Lorem ipsum do</a> </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials