Css ve Html İle Nth-Child İşlem Uygulaması 5

     

Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle Nth-Child İşlem Uygulaması 5 programını aktaracağız.  Css ve Html  de kodlama nasıl gerçekleşir? Css ve Html İle Nth-Child İşlem Uygulaması 5 nasıl kodlanır? Gibi sorularınızın cevabını bu içeriğimizde bulabilirsiniz.


Css ve Html Programlama Örnekleri


Css ve Html İle Nth-Child İşlem Uygulaması Kod Alanı


Css ve Html  web programlama dilinde Nth-Child İşlem Uygulaması 5 kod metnini oluşturduk. Bu uygulamamızda css ile birlikte kullanılan nth-child ifadelerinin birçok farklı kullanımı bulunmaktadır. Bu örneğimizde bu kullanımlar ile ilgili bir içerik oluşturacağız. Bu durumu kavrayabilmek için bu tür örnekleri sıklıkla tekrarlamalısınız. Bu uygulamamızda nth-last-child(2) kullanımı ile sondan bir önceki kutunun rengini pembe haline getireceğiz. Uygulamanın html kod metin alanı aşağıdaki gibidir:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Örnek</title>
<style>
.sayfa{
width: 1200px;
margin: auto;
}
.kutu{
width: 180px;
height: 180px;
border: 5px solid #000;
margin: 10px;
background: white;
line-height: 180px;
float: left;
text-align: center;
font-size: 2em;
}

.sayfa > .kutu:nth-last-child(2)
{
background: pink;
}

</style>
</head>

<body>
<div class="sayfa">
<div class="kutu">1</div>
<div class="kutu">2</div>
<div class="kutu">3</div>
<div class="kutu">4</div>
<div class="kutu">5</div>
<div class="kutu">6</div>
<div class="kutu">7</div>
<div class="kutu">8</div>
<div class="kutu">9</div>
<div class="kutu">10</div>
<div class="kutu">11</div>
<div class="kutu">12</div>
<div class="kutu">13</div>
<div class="kutu">14</div>
<div class="kutu">15</div>
<div class="kutu">16</div>
<div class="kutu">17</div>
<div class="kutu">18</div>
<div class="kutu">19</div>
<div class="kutu">20</div>
</div>
</body>
</html>


Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.

Yorum Gönder

Daha yeni Daha eski

İletişim