Select first and last child with css - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:element parent child

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. element parent child

Description

Select first and last child with css

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">
.accordion-group:first-child .accordion-heading a {
   color:Chartreuse;
}

.accordion-group:last-child .accordion-heading a {
   color:yellow;
}
</style> <!--   www .  j  a v a 2  s  .  c o  m-->
 </head> 
 <body> 
  <div id="accordion2" class="accordion"> 
   <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"> <br>Lorem ipsum dolor si<br> </a> 
    </div> 
    <div id="collapseOne" class="accordion-body in collapse" style="height: auto;"> 
     <div class="accordion-inner"> 
      <p>Lorem ips</p> 
     </div> 
    </div> 
   </div> 
   <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"> <br>Lorem ipsum dolor si<br> </a> 
    </div> 
    <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;"> 
     <div class="accordion-inner"> 
      <p>Lorem ips</p> 
     </div> 
    </div> 
   </div> 
   <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"> <br>Lorem ipsum dolor si<br> </a> 
    </div> 
    <div id="collapseThree" class="accordion-body collapse" style="height: 0px;"> 
     <div class="accordion-inner"> 
      <p>Lorem ips</p> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials