CODEWITHSUNDEEP
jqueryhtmlcsscss-selectors
Nira
Nira

Reputation: 317

HTML, CSS and maybe JQUERY - hide first-child and last-child icons in a table

I have a table where one of the is like this:

<td class="acciones" width="20%">
     <span class="btn-group-action">
     <!-- EDITAR -->
     <span data-toggle="tooltip" class="btn-group label-tooltip" data-original-title="Editar" data-html="true" data-placement="left">                                                    
                                                    <!-- <a class="btn btn-default " href="<?php echo base_url('diccionarios/elemento_especifico_diccionario').'/'.$elemento['ELDI_Id'];?>" title="Editar">
                                                        <i class="material-icons">edit</i>
                                                    </a> -->
                                                    <a class="btn btn-default editar_elemento_diccionario" title="Editar">
    <i class="material-icons">edit</i>
  </a>
 </span>
<!-- BORRAR -->
<span class="btn-group label-tooltip eliminar_elemento_diccionario" id='<? 
   php echo $elemento['ELDI_Id']; ?>' title="Eliminar" data-toggle="tooltip">
   <a class="btn btn-default" href="#"><i class="material-icons">delete</i> 
   </a>  
</span>  
</span>

 <span class="btn-group-action" style="margin-right:3.46px">
 <!-- BAJAR POSICIÓN -->
 <span data-toggle="tooltip" class="btn-group label-tooltip" data-original- 
   title="Bajar posición" data-html="true" data-placement="left">                                                    
   <a class="btn btn-default bajar_posicion_elemento" title="Bajar 
 posición">
<i class="material-icons">arrow_drop_down</i>
</a>
</span>
<!-- SUBIR POSICIÓN -->
<span data-toggle="tooltip" class="btn-group label-tooltip" data-original- 
title="Subir posición" data-html="true" data-placement="left">                                                    
<a class="btn btn- 
default subir_posicion_elemento" title="Subir posición">
<i class="material- 
icons">arrow_drop_up</i>
 </a>
</span> 
 </span>
 </td>

I need to do this:

I don't know how to do this, I tried with CSS but can't make it work.

Thanks for your time.

EDIT

Image showing the icons I need to hide: enter image description here

EDIT2

Ok, I finally figured it out, so here's the answer, simple but I don't have idea about css >.<

CSS:

tr:first-child .subir_posicion_elemento, tr:last-child .bajar_posicion_elemento {
display:none;
}

Upvotes: 0

Views: 469

Answers (3)

Vetrivel Pandiyarajan
Vetrivel Pandiyarajan

Reputation: 646

Use this CSS code to hide first-child and last-child icons in a table:

 table tr td:first-child .subir_posicion_elemento{ 
        display:none;
    }
    table tr td:last-child .bajar_posicion_elemento { 
        display:none;
    }

Upvotes: 1

vommer
vommer

Reputation: 123

Like this? 

table tbody tr td:nth-child(1) .subir_posicion_elemento {
 visibility:hidden; 
}
table tbody tr td:nth-last-child(1) .bajar_posicion_elemento {
visibility:hidden;
}

https://codepen.io/vommbat/pen/yqEBPd

Upvotes: 0

Nira
Nira

Reputation: 317

Ok, I finally figured it out, so here's the answer, simple but I don't have idea about css >.<

CSS:

tr:first-child .subir_posicion_elemento, tr:last-child .bajar_posicion_elemento {
display:none;
}

Thanks!

Upvotes: 0

Related Questions