.NET Tips | معرفی Selector های CSS

اندازه‌ی قلم متن

تخمین مدت زمان مطالعه‌ی مطلب: نه دقیقه

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

معرفی Selector های CSS - قسمت 6

مطالب مشابه