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

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

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

1- .class

این Selector تگ‌هایی را انتخاب می‌نماید که عضو یک کلاس خاص باشند.

<style>
    .first{ color: red}
    .content{color:blue}
</style>
<div class="first">Text 1</div>
<div>Text 2</div>
<p class="first">Text 3</p>
<div class="content">Text 4</div>

در مثال فوق Text 1 و Text 3 به رنگ قرمز و Text 4 به رنگ آبی نمایش می‌یابند.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
Yes	Yes	Yes	Yes	Yes	.class	1

2- #id

این Selector تگی را انتخاب می‌کند که دارای یک id خاص می‌باشد.

<style>
    #pass {
        color: red;
    }        
</style>
<input type="password" id="pass"/>

در مثال فوق محتوای کادر رمز عبور به رنگ قرمز نمایش می‌یابد.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
Yes	Yes	Yes	Yes	Yes	#id	1

3- E

جهت انتخاب تگ‌ها براساس عنوان آنها استفاده می‌شود.

<style>
    div {
        color: red;
    }
</style>
<div>Text 1</div>
<p>Text 2</p>
<div>Text 3</div>

در مثال فوق Text 1 و Text 3 به رنگ قرمز نمایش می‌یابند.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
Yes	Yes	Yes	Yes	Yes	E	1

4- *

این Selector تمامی تگ‌ها را انتخاب می‌نماید

<style>
    * {
        color: red;
    }
</style>
<div>Text 1</div>
<input type="text" value="Text 2"/>
<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

در مثال فوق رنگ متن تمامی تگهای فوق قرمز خواهد شد.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
3.1	9.6	7.0	2.0	4.0	*	2

5- S1 S2

تمامی المنت‌های S2 که فرزند S1 می‌باشند، انتخاب خواهند شد.

<style>
    div span {
        color:red
    }
</style>
<div>
    <h1>Text 1</h1>
    <span>Text 2</span>
    <p>
        <span>Text 3</span>
        <div>Text 4</div>
    </p>
    <span>Text 5</span>
</div>

در مثال فوق Text 2، Text 3 و Text 5 به رنگ قرمز نمایش می‌یابند.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
Yes	Yes	Yes	Yes	Yes	S1 S2	1

6- S1>S2

تمامی المنت‌های S2 که فرزند مستقیم S1 می‌باشند، انتخاب خواهند شد.

<style>
    div>span {
        color:red
    }
</style>
<div>
    <h1>Text 1</h1>
    <span>Text 2</span>
    <p>
        <span>Text 3</span>
        <div>Text 4</div>
    </p>
    <span>Text 5</span>
</div>

در مثال فوق Text 2 و Text 5 به رنگ قرمز نمایش می‌یابند.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
Yes	Yes	7.0	Yes	Yes	S1>S2	2

7- S1+S2

تمامی المنت‌های S2 که هم تراز S1 و دقیقا بعد از S1 قرار گرفته اند را انتخاب می‌نماید.

<style>
    h1+p {
        color: red;
    }
</style>
<div>
    <h1>Text 1</h1>
    <p>Text 2</p>
    <div>Text 3</div>
    <p>Text 4</p>
    <h1>
        <p>Text 5</p>
    </h1>
    <p>Text 6</p>
</div>

در مثال فوق Text 2 و Text 6 به رنگ قرمز نمایش می‌یابند.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
Yes	Yes	7.0	Yes	Yes	S1+S2	2

8- S1~S2

تمامی المنت‌های S2 که هم تراز S1 می‌باشند و بعد از S1 قرار گرفته اند را انتخاب می‌نماید.

<style>
    div ~ p {
        color: red;
    }
</style>
<div>
    <h1>Text 1</h1>
    <p>Text 2</p>
    <div>Text 3</div>
    <p>Text 4</p>
    <h1>
        <p>Text 5</p>
    </h1>
    <p>Text 6</p>
</div>

در مثال فوق Text 4 و Text 6 به رنگ قرمز نمایش می‌یابند.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
3.2	9.6	7.0	3.5	4.0	S1~S2	3

9- S1!>S2

این Selector المنت‌های S1 را انتخاب می‌کند که والد مستقیم S2 می‌باشند.

<style>
    div!>span {
            border: 1px solid red;
        }
</style>
<div>
    <h1>Text 1</h1>
    <div>
        <span>Text 2</span>
        <h1>Text 3</h1>
        <p>Text 4</p>
    </div>
    <div>Text 5</div>
</div>

در مثال فوق کادری قرمز رنگ را دور آن div که شامل محتوای Text 2، Text 3 و Text 4 می‌باشد، ترسیم خواهد نمود.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
No	No	No	No	No	S1!>S2	4

10- S1 /attribute/ S2

تمامی المنت‌های S2 انتخاب می‌شوند که توسط یک attribute از S1 به id المنت S2 ارجاع داده است.

<style>
    label /for/ input {
        color: red;
    }
</style>
<label for="user">User Name:</label>
<input type="text" id="user"/>
<label>Password:</label>
<input type="password" id="pass"/>

در مثال فوق، اولین تگ input که id آن user می‌باشد و توسط تگ label و با استفاده از ویژگی for (به id تگ input) ارجاع داده شده است، انتخاب و محتوای آن قرمز می‌شود.

پشتیبانی در مرورگرها:

					Selector	نسخه CSS
No	No	No	No	No	S1 /attribute/ S2	4

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

مطالب مشابه