مرجع انتخابگرها در css -سه بخش

مرجع انتخابگرها در CSS - بخش اول
​

.class

.intro
{
background-color:yellow;
}
​

این مثال تمامی عناصری که class="intro" هستند را انتخاب و style مورد نظر را به آنها اعمال میکند.
#id

#name
{
background-color:yellow;
}
​

این مثال تمامی عناصری که "id="name هستند را انتخاب و style مورد نظر را به آنها اعمال میکند.
*

*
{
background-color:yellow;
}
​

این مثال تمامی عناصر را انتخاب و style مورد نظر را به آنها اعمال میکند.
element

p
{
background-color:yellow;
}
​

این مثال تمامی تگ های <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
element,element

h1,p
{
background-color:yellow;
}
​

این مثال تمامی تگ های <p> و h1 را انتخاب و style مورد نظر را به آنها اعمال میکند.
element element

div p
{
background-color:yellow;
}
​

تمام تگ های <p> که در داخل تگ <div> قرار دارند را انتخاب و style مورد نظر را به آنها اعمال میکند.
element>element

div>p
{
background-color:yellow;
}
​

تمام تگ های <p> که والد (parent) آنها تگ <div> میباشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
element+element

div+p
{
background-color:yellow;
}
​

تمام تگ های <p> که بلافاصله بعد از تگ <div> قرار دارند را انتخاب و style مورد نظر را به آنها اعمال میکند.

 

پاسخ : مرجع انتخابگرها در css -سه بخش

مرجع انتخابگرها در CSS - بخش دوم
​

[attribute]

a[target]
{
background-color:yellow;
}
​

تمام تگ های<a> که ویژگی target را نیز دارند را انتخاب و style مورد نظر را به آنها اعمال میکند.

<a href="http://www.pars-soft.ir">گروه نرم افزار ی پارس سافت</a>
<a href="http://www.pars-soft.ir" target="_blank">طراحی وب سایت</a>
​

[attribute=value]

a[target=_blank]
{
background-color:yellow;
}
​

تمام تگ های<a> که ویژگی target=_blank را دارند، انتخاب و style مورد نظر را به آنها اعمال میکند.
[attribute~=value]

[title~=pars]
{
background-color:yellow;
}
​

تمام تگ های<a> که ویژگی "title=pars" را دارند، انتخاب و style مورد نظر را به آنها اعمال میکند.
[attribute|=value]

[lang|=fa]
{
background-color:yellow;
}
​

تمامی عناصری که ویژگی "lang" آنها با "fa" آغاز میشود، انتخاب و style مورد نظر را به آنها اعمال میکند.
:link

a:link
{
background-color:yellow;
}
​

تمام تگ های<a> که روی آنها کلیک نشده است را، انتخاب و style مورد نظر را به آنها اعمال میکند.
:visited

a:visited
{
background-color:yellow;
}
​

تمام تگ های<a> که روی آنها کلیک شده است را، انتخاب و style مورد نظر را به آنها اعمال میکند.
:hover

a:hover
{
background-color:yellow;
}
​

تمام تگ های<a> را زمانی که با ماوس روی آنها میروید، انتخاب و style مورد نظر را به آنها اعمال میکند.
:focus

input:focus
{
background-color:yellow;
}
​

تمام تگ های input را زمانی که انتخاب میکنید، style مورد نظر را به آنها اعمال میکند.

 

پاسخ : مرجع انتخابگرها در css -سه بخش

مرجع انتخابگرها در CSS - بخش سوم
​

​

:first-letter

p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
​

اولین کلمه از تمام تگ های <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
ویژگی هایی که در first-letter میتوانند مورد استفاده قرار بگیرند.

1. font properties
2. color properties
3. background properties
4. margin properties
5. padding properties
6. border properties
7. text-decoration
8. vertical-align (only if float is 'none')
9. text-transform
10. line-height
11. float
12. clear

:first-line

p:first-line
{
background-color:yellow;
}
​

اولین خط از تمام تگ های <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
ویژگی هایی که در first-line میتوانند مورد استفاده قرار بگیرند.

1. font properties
2. color properties
3. background properties
4. word-spacing
5. letter-spacing
6. text-decoration
7. vertical-align
8. text-transform
9. line-height
10. clear

:first-child

p:first-child
{
background-color:yellow;
}
​

تمام تگ های <p> که اولین فرزند (child) از پدر و مادر (parent) خود است را انتخاب و style مورد نظر را به آنها اعمال میکند.
:before

p:before
{
content:"http://pars-soft.ir ";
}
​

به اول تمام تگ های <p> ، لینک طراحی سایت | طراحی وب سایت | شرکت طراحی سایت را اضافه میکند.
:after

p:after
{
content:"http://pars-soft.ir";
}
​

بعد تمام تگ های <p> ، لینک طراحی سایت | طراحی وب سایت | شرکت طراحی سایت را اضافه میکند.
:lang

p:lang(it)
{
background:yellow;
}
​

تمام تگ های <p> که با ویژگی "lang=it" شروع میشوند را انتخاب و style مورد نظر را به آنها اعمال میکند.
element1~element2

p~ul
{
background:#ff0000;
}
​

تمام تگ های <ul> که والد مشترکی با تگ <p> دارند را انتخاب و style مورد نظر را به آنها اعمال میکند.
[attribute^=value]

div[class^="test"]
{
background:#ffff00;
}
​

تمام تگ های div که با ویژگی "class=test" شروع میشوند را انتخاب و style مورد نظر را به آنها اعمال میکند.
[attribute$=value]

div[class$="test"]
{
background:#ffff00;
}
​

تمام تگ های div که با ویژگی "class=test" تمام میشوند را انتخاب و style مورد نظر را به آنها اعمال میکند.
[attribute*=value]

div[class*="test"]
{
background:#ffff00;
}
​

تمام تگ های div که ویژگی "class=test" را شامل میشوند را انتخاب و style مورد نظر را به آنها اعمال میکند.
:first-of-type

p:first-of-type
{
background:#ff0000;
}
​

اولین تگ <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
:last-of-type

p:last-of-type
{
background:#ff0000;
}
​

آخرین تگ <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
nly-of-type

pnly-of-type
{
background:#ff0000;
}
​

هر تگ <p> که تک فرزند (only child) والد (parent) خود باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
:nth-child()

p:nth-child(2)
{
background:#ff0000;
}
​

هر تگ <p> که دومین فرزند (only child) والد (parent) خود باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
:nth-last-child()

p:nth-last-child(2)
{
background:#ff0000;
}
​

هر تگ <p> که دومین فرزند (only child) والد (parent) خود از آخر باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
:nth-of-type()

p:nth-of-type(2)
{
background:#ff0000;
}
​

هر تگ <p> که دومین تگ <p> از والد (parent) خود باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
:nth-last-of-type()

p:nth-last-of-type(2)
{
background:#ff0000;
}
​

هر تگ <p> که دومین تگ <p> از والد (parent) خود از آخر باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
:last-child

p:last-child
{
background:#ff0000;
}
​

برای هر تگ <p> که آخرین فرزند (child) از والد (parent) خود باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
:root

:root
{
background:#ff0000;
}
​

تگ HTML ، را انتخاب و style مورد نظر را به آنها اعمال میکند.
:empty

p:empty
{
background:#ff0000;
}
​

هر تگ <p> که محتوایی نداشته باشد را انتخاب و style مورد نظر را به آنها اعمال میکند.
:enabled

input[type="text"]:enabled
{
background:#ffff00;
}
​

تمام تگ های <input> که "type="text باشند و فعال باشند را انتخاب و style مورد نظر را به آنها اعمال میکند.
isabled

input[type="text"]isabled
{
background:#dddddd;
}
​

تمام تگ های <input> که "type="text باشند وغیر فعال باشند را انتخاب و style مورد نظر را به آنها اعمال میکند.
:checked

input:checked
{
background:#ff0000;
}
​

تمام تگ های <input> که "type="checked باشند را انتخاب و style مورد نظر را به آنها اعمال میکند.
:not

:not(p)
{
background:#ff0000;
}
​

تمامی تگ ها جز تگ <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.
::selection

::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
​

متن هایی که با دوبار کلیک کردن بر آنها انتخاب میشوند ، style مورد نظر را به آنها اعمال میکند

 

در مباحث کمی پیشرفته تر، دسترسی تودر تو هم وجود داره. یعنی اگر داشته باشیم:

<div class="test">
<a href=""></a>
</div>

می تونیم به اینصورت دسترسی پیدا کنیم:

.test a{
پروپرتی ها
}