سلکتورهای css3

سلکتور css به شما کمک خواهد کرد بدون اینکه به دیو های خود آیدی و کلس بدهید به راحتی آن هارا کنترل کنید البته این کار را زیاد پیشنهاد نمیکنیم چون امکان دارد شما در آینده بخواهید تغییراتی ایجاد کنید که مستلزم آن است که تک تک کد ها را چک کنید.

:first-letter

[codesyntax lang=”php”]

[/codesyntax]

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

ویژگی هایی که در first-letter میتوانند مورد استفاده قرار بگیرند.

[codesyntax lang=”php”]

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if float is ‘none’)
text-transform
line-height
float
clear
:first-line

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

[/codesyntax]

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

ویژگی هایی که در first-line میتوانند مورد استفاده قرار بگیرند.

[codesyntax lang=”php”]

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-child

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

[/codesyntax]

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

:before

[codesyntax lang=”php”]

p:before
{
content:”https://groupdesign.ir “;
}

[/codesyntax]

به اول تمام تگ های <p> ، لینک https://groupdesign.ir

:after

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

[/codesyntax]

بعد تمام تگ های <p> ، لینک http://pars-soft.ir را اضافه میکند.

:lang

[codesyntax lang=”php”]

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

[/codesyntax]

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

element1~element2

[codesyntax lang=”php”]

p~ul
{
background:#ff0000;
}

[/codesyntax]

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

[attribute^=value]

[codesyntax lang=”php”]

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

[/codesyntax]

تمام تگ های div که با ویژگی “class=test” شروع میشوند را انتخاب و style مورد نظر را به آنها اعمال میکند.

[attribute$=value]

[codesyntax lang=”php”]

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

[/codesyntax]

تمام تگ های div که با ویژگی “class=test” تمام میشوند را انتخاب و style مورد نظر را به آنها اعمال میکند.

[attribute*=value]

[codesyntax lang=”php”]

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

[/codesyntax]

تمام تگ های div که ویژگی “class=test” را شامل میشوند را انتخاب و style مورد نظر را به آنها اعمال میکند.

:first-of-type

[codesyntax lang=”php”]

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

[/codesyntax]

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

:last-of-type

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

[/codesyntax]

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

:only-of-type

[codesyntax lang=”php”]

p:only-of-type
{
background:#ff0000;
}

[/codesyntax]

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

:nth-child()

[codesyntax lang=”php”]

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

[/codesyntax]

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

:nth-last-child()

[codesyntax lang=”php”]

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

[/codesyntax]

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

:nth-of-type()

[codesyntax lang=”php”]

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

[/codesyntax]

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

:nth-last-of-type()

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

[/codesyntax]

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

:last-child

[codesyntax lang=”php”]

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

[/codesyntax]

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

:root

[codesyntax lang=”php”]

:root
{
background:#ff0000;
}

[/codesyntax]

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

:empty

[codesyntax lang=”php”]

p:empty
{
background:#ff0000;
}

[/codesyntax]

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

:enabled

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

[/codesyntax]

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

:disabled

[codesyntax lang=”php”]

input[type=”text”]:disabled
{
background:#dddddd;
}

[/codesyntax]

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

:checked

[codesyntax lang=”php”]

input:checked
{
background:#ff0000;
}

[/codesyntax]

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

:not

[codesyntax lang=”php”]

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

[/codesyntax]

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

::selection

[codesyntax lang=”php”]
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}

[/codesyntax]

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