51- :first-child
تگی را انتخاب میکند که اولین فرزند والد خود باشد.
در مثال فوق Text 1، Text 6و Text 9 به رنگ قرمز نمایش مییابند.
<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>
پشتیبانی در مرورگرها:
|
|
|
|
| Selector | نسخه CSS |
3.1 | 9.6 | 7.0 | 3.0 | 4.0 | :first-child | 2 |
52- :last-child
تگی را انتخاب میکند که آخرین فرزند والد خود باشد.
در مثال فوق Text 15، Text 11و Text 9 به رنگ قرمز نمایش مییابند.
<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>
پشتیبانی در مرورگرها:
|
|
|
|
| Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :last-child | 3 |
53- :only-child
تگی را انتخاب میکند که تنها فرزند والد خود باشد.
در مثال فوق Text 9 به رنگ قرمز نمایش مییابد.
<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>
پشتیبانی در مرورگرها:
|
|
|
|
| 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 استفاده نمود.
در مثال فوق Text 2و Text 7 به رنگ قرمز نمایش مییابند.
<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>
پشتیبانی در مرورگرها:
|
|
|
|
| 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 استفاده نمود.
در مثال فوق Text 14و Text 10 به رنگ قرمز نمایش مییابند.
<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>
پشتیبانی در مرورگرها:
|
|
|
|
| Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :nth-last-child(n) | 3 |
56- :first-of-type
تگی را انتخاب میکند که اولین تگ در بین هم نوعان خودش و در یک والد باشد.
در مثال فوق Text 1، Text 2، Text 3، Text 4، Text 6، Text 7، Text 8، Text 9و Text 10 به رنگ قرمز نمایش مییابند.
<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>
پشتیبانی در مرورگرها:
|
|
|
|
| Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :first-of-type | 3 |
57- :last-of-type
تگی را انتخاب میکند که آخرین تگ در بین هم نوعان خودش و در یک والد باشد.
در مثال فوق Text 15، Text 14، Text 12، Text 11، Text 10، Text 9، Text 7، Text 6و Text 3 به رنگ قرمز نمایش مییابند.
<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>
پشتیبانی در مرورگرها:
|
|
|
|
| Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :last-of-type | 3 |
58- :only-of-type
تگی را انتخاب میکند که تنها تگ در بین هم نوعان خودش و در یک والد باشد.
در مثال فوق Text 3، Text 6، Text 7، Text 9 و Text 10 به رنگ قرمز نمایش مییابند.
<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>
پشتیبانی در مرورگرها:
|
|
|
|
| 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 استفاده نمود.
در مثال فوق Text 5، Text 9، Text 12 و Text 14 به رنگ قرمز نمایش مییابند.
<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>
پشتیبانی در مرورگرها:
|
|
|
|
| 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 استفاده نمود.
در مثال فوق Text 1، Text 2، Text 9 و Text 13 به رنگ قرمز نمایش مییابند.
<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>
پشتیبانی در مرورگرها:
|
|
|
|
| Selector | نسخه CSS |
3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :nth-last-of-type(n) | 3 |