Sercan Aslan
Altın 4 Altın IV
Html5 & Css3

CSS3 nth-child ve Bazı Seçiciler

Videoda nth-child ve benzeri birkaç css seçicisinden bahsettim. Benim sık sık kullandığım seçicileri anlatmaya çalıştım. Html elemanlarını yakalayıp onlara işlemler uygulayarak kodlamalarınızı daha sade hale getirebileceğiniz bir özellik olduğunu düşünüyorum.

:nth-child() parantez içinde aldığı parametre doğrultusunda yakalama işlemi yapar. Baştan başlayarak sayar ve ilk satır değeri 1’dir.

:nth-last-child() parantez içinde aldığı değer doğrultusunda yakalama işlemi yapar. Sondan başlayarak sayar ve ilk satır değeri 1’dir.

:first-child verilen elemanın ilk satırını yakalamayı sağlar.

:last-child verilen elemanın son satırını yakalamayı sağlar.

Html kısmında kullandığım kodlar

<!doctype html>
<html lang="tr">
<head>
    <title>LOREM IPSUM</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="LOREM IPSUM">
    <meta name="author" content="SitePoint">
    <meta name="keywords" content="LOREM IPSUM">
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>

    <div class="list">
        <div>List 1</div>
        <div>List 2</div>
        <div>List 3</div>
        <div>List 4</div>
        <div>List 5</div>
        <div>List 6</div>
    </div>
    
    <div class="list2">
        <div>List 1</div>
        <div>List 2</div>
        <div>List 3</div>
        <div>List 4</div>
        <div>List 5</div>
        <div>List 6</div>
    </div>
    
</body>
</html>

CSS kısmında kullandığım kodlar

body {
	margin:0;
	padding:0
}

.list {
	border:1px solid #ddd;
	margin:20px;
	padding:10px
}
.list div {
	display:inline-block;
	padding:30px;
	border:1px solid #ddd;
	margin:5px;
	font-size:13px;
	font-family: arial;
	color:#999
}
.list div:nth-child(odd) {
	background:#666;
	color:#fff
}
.list div:nth-child(even) {
	background:#999;
	color:#fff
}

.list2 {
	border:1px solid #ddd;
	margin:20px;
	padding:10px
}
.list2 div {
	display:inline-block;
	padding:30px;
	border:1px solid #ddd;
	margin:5px;
	font-size:13px;
	font-family: arial;
	color:#999
}
.list2 div:nth-child(2n+0) {
	background:#666;
	color:#fff
}

Demoİndir

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sadece css kullanılarak açılır menü yapımı için internette epey kaynak var aslında. Ben vid

09:30 // 0 Yorum Karanlığa Işık Tut

Videoda nth-child ve benzeri birkaç css seçicisinden bahsettim. Benim sık sık kullandığım se

09:27 // 0 Yorum Karanlığa Işık Tut

Sadece css kullanılarak açılır menü yapımı için internette epey kaynak var aslında. Ben vid

09:24 // 0 Yorum Karanlığa Işık Tut

İzlediğim başarı hikayelerinin konu edildiği bazı filmleri sizler için derledim. 10 adet film

09:17 // 0 Yorum Karanlığa Işık Tut