Primeiro e ultimo elemento com css

Hoje vou ensinar uma maneira de acessar o primeiro e o último elemento de uma lista em html, isso é muito importante, quando precisamos aplicar uma configuração específica a estes elementos, por exemplo, sempre iniciar o primeiro link de um menu com uma cor de destaque, ou retirar a margem do último elemento, você pode precisar em diversas situações.

Bom o primeiro elemento é acessado por first-child e o ultimo por last-child

vamos criar uma lista em html onde vamos alterar a cor do primeiro e último elemento

<ul>
<li> parte 1 </li>
<li> parte 2 </li>
<li> parte 3 </li>
<li> parte 4 </li>
<li> parte 5 </li>
<li> parte 6 </li>
</ul>

No css eu acesso os primeiro e ultimo elemento

<style>
ul {border:1px #ccc solid; padding:20px; list-style-type:none;}
ul li:first-child {background-color:#c30;}
ul li:last-child {background-color:#f00;}
ul li {background-color:#ddd; padding:5px; font-size:20px; font-weight:bold; margin-bottom:2px;}
</style>

Sugiro que você continue acompanhando o blog, pois teremos varios tutoriais e eu pretendo utilizar este exemplo em um código que vai nos ajudar bastante, lembre do first-child e last-child.


Desta vez não vou deixar um link para download do código, mas deixo abaixo o código completo, para você testar aí.

abs


<style>
ul {border:1px #ccc solid; padding:20px; list-style-type:none;}
ul li:first-child {background-color:#c30;}
ul li:last-child {background-color:#f00;}
ul li {background-color:#ddd; padding:5px; font-size:20px; font-weight:bold; margin-bottom:2px;}
</style>
<ul>
<li> parte 1 </li>
<li> parte 2 </li>
<li> parte 3 </li>
<li> parte 4 </li>
<li> parte 5 </li>
<li> parte 6 </li>
</ul>