Curso de Design Responsivo Aula 11 Utilizando seletores first-child e last-child

Nessa vídeo aula vamos aprender como utilizar os seletores first-child e last-child que também são conhecidos como pseudo-classes.

O que são seletores?

Seletores são "padrões" ou "modelos" que casam com os elementos de uma árvore do documento e portanto podem ser usados para selecionar os nós de um documento XML. Seletores foram otimizados para serem usados com as linguagens de marcação HTML e XML. As CSS usam seletores para atrelar propriedades de estilização aos elementos de um documento.

A pseudo-classe de CSS :first-child representa qualquer elemento que seja o primeiro filho de seus pais.

Sintaxe

elemento:first-child { estilos }

Exemplo

HTML

<div>
  <span>Este span é verde limão!</span>
  <span>Este span não é verde limão. :(</span>
</div>

CSS

span:first-child {
    background-color: lime
}

A CSS pseudo-classe :last-child representa qualquer elemento que é o último filho de seu elemento pai.

Sintaxe

elemento:last-child { propriedades de estilo }

Exemplo

HTML

<ul>
  <li>Esse item não é afetado pelo estilo.</li>
  <li>Esse também não.</li>
  <li>Esse item é! :)</li>
</ul>

CSS

li:last-child {
    background-color: lime
}

Código HTML desenvolvido na vídeo aula

<section class="fundoVerdePrimavera limpa">
            <div class="conteudo">
                <h2>castre seu bichinho, não há lares para todos</h2>
                <p>Castrar seu animal ...</p>
                <p>Um casal .....</p>
                <ul class="estatisticas">
                    <li>
                        <p>12</p>
                        <p>Filhotes no 1º ano</p>
                    </li> 
                    <li>
                        <p>66</p>
                        <p>Filhotes no 2º ano</p>
                    </li>   
                    <li>
                        <p>382</p>
                        <p>Filhotes no 3º ano</p>
                    </li>   
                    <li>
                        <p>2.201</p>
                        <p>Filhotes no 4º ano</p>
                    </li>   
                    <li>
                        <p>12.680</p>
                        <p>Filhotes no 5º ano</p>
                    </li>   
                </ul>
            </div>
        </section>

Código CSS desenvolvido na vídeo aula

.fundoVerdePrimavera {
    color: #005500;
    background-color: #33CC33
}
.estatisticas li {
    display: inline-block;
    margin: 10px
}
.estatisticas p {
   text-align: center;
   color: #666600
}
.estatisticas p:first-child {
    color: #91F000;
    font-size: 4em;
    font-weight: bold;
    text-shadow: 2px 2px #003300;
    margin-bottom: -5px
}

 



Hospedagem Profissional de Sites