51- :first-child
تگی را انتخاب میکند که اولین فرزند والد خود باشد.
<style>
div.container :first-child {
color: red;
}
</style>
<div class="container">
<h1>Text 1</h1>
<span>Text 2</span>
<p>Text 3</p>
<div>Text 4</div>
<div>Text 5</div>
<div>
<h1>Text 6</h1>
<span>Text 7</span>
<p>Text 8</p>
<p>
<span>Text 9</span>
</p>
<div>Text 10</div>
<p>Text 11</p>
</div>
<h1>Text 12</h1>
<div>Text 13</div>
<span>Text 14</span>
<div>Text 15</div>
</div>
در مثال فوق Text 1، Text 6و Text 9 به رنگ قرمز نمایش مییابند.
پشتیبانی در مرورگرها:
| | | | | Selector | نسخه CSS |
3.1 | 9.6 | 7.0 | 3.0 | 4.0 | :first-child | 2 |
52- :last-child
تگی را انتخاب میکند که آخرین فرزند والد خود باشد.
<style>
div.container :last-child {
color: red;
}
</style>
<div class="container">
<h1>Text 1</h1>
<span>Text 2</span>
<p>Text 3</p>
<div>Text 4</div>
<div>Text 5</div>
<div>
<h1>Text 6</h1>
<span>Text 7</span>
<p>Text 8</p>
<p>
<span>Text 9</span>
</p>
<div>Text 10</div>
<p>Text 11</p>
</div>
<h1>Text 12</h1>
<div>Text 13</div>
<span>Text 14</span>
<div>Text 15</div>
</div>
در مثال فوق Text 15، Text 11و Text 9 به رنگ قرمز نمایش مییابند.
پشتیبانی در مرورگرها:
| | | | | Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :last-child | 3 |
53- :only-child
تگی را انتخاب میکند که تنها فرزند والد خود باشد.
<style>
div.container :only-child {
color: red;
}
</style>
<div class="container">
<h1>Text 1</h1>
<span>Text 2</span>
<p>Text 3</p>
<div>Text 4</div>
<div>Text 5</div>
<div>
<h1>Text 6</h1>
<span>Text 7</span>
<p>Text 8</p>
<p>
<span>Text 9</span>
</p>
<div>Text 10</div>
<p>Text 11</p>
</div>
<h1>Text 12</h1>
<div>Text 13</div>
<span>Text 14</span>
<div>Text 15</div>
</div>
در مثال فوق Text 9 به رنگ قرمز نمایش مییابد.
پشتیبانی در مرورگرها:
| | | | | Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :only-child | 3 |
54- :nth-child(n)
تگی را انتخاب میکند که nامین فرزند والد خود باشد. به جای n میتوان از مقادیر odd (فرزندان فرد)، even (فرزندان زوج) و an+b استفاده نمود.
<style>
div.container :nth-child(2) {
color: red;
}
</style>
<div class="container">
<h1>Text 1</h1>
<span>Text 2</span>
<p>Text 3</p>
<div>Text 4</div>
<div>Text 5</div>
<div>
<h1>Text 6</h1>
<span>Text 7</span>
<p>Text 8</p>
<p>
<span>Text 9</span>
</p>
<div>Text 10</div>
<p>Text 11</p>
</div>
<h1>Text 12</h1>
<div>Text 13</div>
<span>Text 14</span>
<div>Text 15</div>
</div>
در مثال فوق Text 2و Text 7 به رنگ قرمز نمایش مییابند.
پشتیبانی در مرورگرها:
| | | | | Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :nth-child(n) | 3 |
55- :nth-last-child(n)
تگی را انتخاب میکند که nامین فرزند والد خود از آخر باشد. به جای n میتوان از مقادیر odd (فرزندان فرد)، even (فرزندان زوج) و an+b استفاده نمود.
<style>
div.container :nth-last-child(2) {
color: red;
}
</style>
<div class="container">
<h1>Text 1</h1>
<span>Text 2</span>
<p>Text 3</p>
<div>Text 4</div>
<div>Text 5</div>
<div>
<h1>Text 6</h1>
<span>Text 7</span>
<p>Text 8</p>
<p>
<span>Text 9</span>
</p>
<div>Text 10</div>
<p>Text 11</p>
</div>
<h1>Text 12</h1>
<div>Text 13</div>
<span>Text 14</span>
<div>Text 15</div>
</div>
در مثال فوق Text 14و Text 10 به رنگ قرمز نمایش مییابند.
پشتیبانی در مرورگرها:
| | | | | Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :nth-last-child(n) | 3 |
56- :first-of-type
تگی را انتخاب میکند که اولین تگ در بین هم نوعان خودش و در یک والد باشد.
<style>
div.container :first-of-type {
color: red;
}
</style>
<div class="container">
<h1>Text 1</h1>
<span>Text 2</span>
<p>Text 3</p>
<div>Text 4</div>
<div>Text 5</div>
<div>
<h1>Text 6</h1>
<span>Text 7</span>
<p>Text 8</p>
<p>
<span>Text 9</span>
</p>
<div>Text 10</div>
<p>Text 11</p>
</div>
<h1>Text 12</h1>
<div>Text 13</div>
<span>Text 14</span>
<div>Text 15</div>
</div>
در مثال فوق Text 1، Text 2، Text 3، Text 4، Text 6، Text 7، Text 8، Text 9و Text 10 به رنگ قرمز نمایش مییابند.
پشتیبانی در مرورگرها:
| | | | | Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :first-of-type | 3 |
57- :last-of-type
تگی را انتخاب میکند که آخرین تگ در بین هم نوعان خودش و در یک والد باشد.
<style>
div.container :last-of-type {
color: red;
}
</style>
<div class="container">
<h1>Text 1</h1>
<span>Text 2</span>
<p>Text 3</p>
<div>Text 4</div>
<div>Text 5</div>
<div>
<h1>Text 6</h1>
<span>Text 7</span>
<p>Text 8</p>
<p>
<span>Text 9</span>
</p>
<div>Text 10</div>
<p>Text 11</p>
</div>
<h1>Text 12</h1>
<div>Text 13</div>
<span>Text 14</span>
<div>Text 15</div>
</div>
در مثال فوق Text 15، Text 14، Text 12، Text 11، Text 10، Text 9، Text 7، Text 6و Text 3 به رنگ قرمز نمایش مییابند.
پشتیبانی در مرورگرها:
| | | | | Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :last-of-type | 3 |
58- :only-of-type
تگی را انتخاب میکند که تنها تگ در بین هم نوعان خودش و در یک والد باشد.
<style>
div.container :only-of-type {
color: red;
}
</style>
<div class="container">
<h1>Text 1</h1>
<span>Text 2</span>
<p>Text 3</p>
<div>Text 4</div>
<div>Text 5</div>
<div>
<h1>Text 6</h1>
<span>Text 7</span>
<p>Text 8</p>
<p>
<span>Text 9</span>
</p>
<div>Text 10</div>
<p>Text 11</p>
</div>
<h1>Text 12</h1>
<div>Text 13</div>
<span>Text 14</span>
<div>Text 15</div>
</div>
در مثال فوق Text 3، Text 6، Text 7، Text 9 و Text 10 به رنگ قرمز نمایش مییابند.
پشتیبانی در مرورگرها:
| | | | | Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :only-of-type | 3 |
59- :nth-of-type(n)
تگی را انتخاب میکند که nامین تگ در بین هم نوعان خودش و در یک والد باشد. به جای n میتوان از مقادیر odd (فرزندان فرد)، even (فرزندان زوج) و an+b استفاده نمود.
<style>
div.container :nth-of-type(2) {
color: red;
}
</style>
<div class="container">
<h1>Text 1</h1>
<span>Text 2</span>
<p>Text 3</p>
<div>Text 4</div>
<div>Text 5</div>
<div>
<h1>Text 6</h1>
<span>Text 7</span>
<p>Text 8</p>
<p>
<span>Text 9</span>
</p>
<div>Text 10</div>
<p>Text 11</p>
</div>
<h1>Text 12</h1>
<div>Text 13</div>
<span>Text 14</span>
<div>Text 15</div>
</div>
در مثال فوق Text 5، Text 9، Text 12 و Text 14 به رنگ قرمز نمایش مییابند.
پشتیبانی در مرورگرها:
| | | | | Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :nth-of-type(n) | 3 |
60- nth-last-of-type(n)
تگی را انتخاب میکند که nامین تگ از آخر در بین هم نوعان خودش و در یک والد باشد. به جای n میتوان از مقادیر odd (فرزندان فرد)، even (فرزندان زوج) و an+b استفاده نمود.
<style>
div.container :nth-last-of-type(2) {
color: red;
}
</style>
<div class="container">
<h1>Text 1</h1>
<span>Text 2</span>
<p>Text 3</p>
<div>Text 4</div>
<div>Text 5</div>
<div>
<h1>Text 6</h1>
<span>Text 7</span>
<p>Text 8</p>
<p>
<span>Text 9</span>
</p>
<div>Text 10</div>
<p>Text 11</p>
</div>
<h1>Text 12</h1>
<div>Text 13</div>
<span>Text 14</span>
<div>Text 15</div>
</div>
در مثال فوق Text 1، Text 2، Text 9 و Text 13 به رنگ قرمز نمایش مییابند.
پشتیبانی در مرورگرها:
| | | | | Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :nth-last-of-type(n) | 3 |