Seletores Css – first-child last-child e nth-child

Seletores Css – first-child last-child e nth-child

O que é first-child ?

O :first-child seletor é usado para selecionar o seletor especificado, apenas se for o primeiro filho de seu pai.

O que é last-child ?

O :last-child seletor corresponde a cada elemento que é o último filho de seu pai.

A pseudo-classe CSS :nth-child() seleciona elementos com base em suas posições em um grupo de elementos irmãos.

O que é nth-child(1) ?

 O nth-child é capaz de selecionar um elemento dentre uma lista de elementos utilizando sua posição numérica. Da até para selecionar elementos pares e ímpares. ou ordem numero: 1, 2, 3…

O que é nth-child(odd) ?

Representa as linhas ímpares de uma div HTML: 1, 3, 5, etc.

O que é nth-child(even) ?

Representa as linhas pares de uma tabela HTML: 2, 4, 6, etc.

Veja os Exemplos no html:

<div class="box-exemplo-1"> 
 
    <div class="exemplo-1"> First-child </div>
    <div class="exemplo-1"> ... </div>
    <div class="exemplo-1"> ... </div>
    <div class="exemplo-1"> last-child </div> 

</div>

<div class="box-exemplo-2"> 
 
    <div class="exemplo-2"> nth-child(1) </div>
    <div class="exemplo-2"> nth-child(2) </div>
    <div class="exemplo-2"> nth-child(3) </div>
    <div class="exemplo-2"> nth-child(4) </div> 

</div>  

<div class="box-exemplo-3"> 
 
    <div class="exemplo-3"> 1 Impar </div>
    <div class="exemplo-3"> 2 Par </div>
    <div class="exemplo-3"> 3 Impar </div>
    <div class="exemplo-3"> 4 Par </div> 

</div>  

<div class="box-exemplo-4"> 
 
    <div class="exemplo-4"> Hover </div>
    <div class="exemplo-4"> Hover </div>
    <div class="exemplo-4"> Hover </div>
    <div class="exemplo-4"> Hover </div> 

</div> 

Vamos adicionar o Css:

/*EXEMPLO 1*/
.box-exemplo-1    { 

    width:100%; 
    float:left;
    background:#fff; 
    box-shadow: 1px 0px 1.2px 0px #e3e3e3; 
    border-radius:3px;
    margin-bottom:20px;
    padding:1em;
}

.box-exemplo-1 .exemplo-1 {
   
    width: 24%;
    height: 150px;
    line-height:150PX;
    text-align: center;
    background: #ececec;
    float: left;
    margin-right: 1.33%;

}

.exemplo-1:first-child { background-color: #ffc049; }
.exemplo-1:last-child  { background-color: #94f75d; margin-right:0;}


/*EXEMPLO 2*/
.box-exemplo-2    { 

    width:100%; 
    float:left;
    background:#fff; 
    box-shadow: 1px 0px 1.2px 0px #e3e3e3; 
    border-radius:3px;
    margin-bottom:20px;
    padding:1em;
}

.box-exemplo-2 .exemplo-2 {
   
    width: 24%;
    height: 150px;
    line-height:150PX;
    text-align: center;
    background: #ececec;
    float: left;
    margin-right: 1.33%;

}

.exemplo-2:nth-child(1) { background-color: #00cad2; }
.exemplo-2:nth-child(2) { background-color: #a400d2; }
.exemplo-2:nth-child(3) { background-color: #8ea9aa; }
.exemplo-2:nth-child(4) { background-color: #f46262; margin-right:0; }

/*EXEMPLO 3*/
.box-exemplo-3    { 

    width:100%; 
    float:left;
    background:#fff; 
    box-shadow: 1px 0px 1.2px 0px #e3e3e3; 
    border-radius:3px;
    margin-bottom:20px;
    padding:1em;
}

.box-exemplo-3 .exemplo-3 {
   
    width: 24%;
    height: 150px;
    line-height:150PX;
    text-align: center;
    background: #ececec;
    float: left;
    margin-right: 1.33%;

}

.exemplo-3:nth-child(odd) { background-color: #ffd700; }  /*Impar*/
.exemplo-3:nth-child(even) { background-color: #ffa1a1; } /*Par*/
.exemplo-3:nth-child(4) { margin-right:0; }

/*EXEMPLO 4*/
.box-exemplo-4    { 

    width:100%; 
    float:left;
    background:#fff; 
    box-shadow: 1px 0px 1.2px 0px #e3e3e3; 
    border-radius:3px;
    margin-bottom:20px;
    padding:1em;
}

.box-exemplo-4 .exemplo-4 {
   
    width: 24%;
    height: 150px;
    line-height:150PX;
    text-align: center;
    background: #ececec;
    float: left;
    margin-right: 1.33%;
    transition:.5s;

}

.exemplo-4:hover.exemplo-4:nth-child(1){ background-color: #00cfff;; }
.exemplo-4:hover.exemplo-4:nth-child(2) { background-color: #f00; }
.exemplo-4:hover.exemplo-4:nth-child(3) { background-color: #ffd700; }
.exemplo-4:hover.exemplo-4:nth-child(4) { background-color: #ff00bf; }

.exemplo-4:nth-child(4) { margin-right:0; }

Veja o Resultado!

Baixar Código Veja Funcionando