CSS Nth-Child Örnekleri

S

sdkbyrm

webmasterfrm
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Ticaret: 0 / 0 / 0
CSS3 ile birlikte gelen nth-child seçicisinin birçok farklı kullanımı bulunmaktadır. CSS Nts-Child Kullanımı ile ilgili örnekleri makalemizde bulabilirsiniz.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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: red;
line-height: 180px;
float: left;
text-align: center;
font-size: 2em;
}

.sayfa > .kutu:nth-child(8){
background: blue;
}
</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">16</div>
<div class="kutu">16</div>
<div class="kutu">16</div>
<div class="kutu">16</div>
</div>
</body>
</html>

1608733174968.png
Tek olan kutuları seçme ve rengini mavi yapma.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!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-child(2n+1){
background: blue;
}
</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">16</div>
<div class="kutu">16</div>
<div class="kutu">16</div>
<div class="kutu">16</div>
</div>
</body>
</html>

1608733189571.png
En sağdan bir önceki yani 4-9-14-19 nolu kutuları mavi yapalım.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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-child(5n-1)
{
background: blue;
}

</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>

1608733222763.png
nth-child(odd) ve nth-child(even) kullanarak tek ve çift olan kutuları seçme:
1608733238673.png

nth-child(odd) Listede tek olanları seçer, 1, 3, 5 gibi.
nth-child(even) ise Listede çift olanları seçer.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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-child(odd)
{
background: blue;
}

.sayfa > .kutu:nth-child(even)
{
background: red;
}

</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>
1608733253380.png
nth-last-child(2) ile sondan bir önceki kutunun rengini pembe yapalım.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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>
1608733267262.png
 
Forum da cevap yazabilmeniz için Giriş Yapın ve Kayıt Ol'un.
Üst