طراحی سایت در کرج|شرکت طراحی سایت|سئو در کرج|طراحی اپلیکشن موبایل

برای مشاهده بخش خدمات طراحی سایت به سمت پایین اسکرول کنید

سلکتورهای css3

سلکتورهای css3Reviewed by مهدی اخوان on Jul 5Rating:

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

 

:first-letter

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
p:first-letter
{ 
font-size:۲۰۰%;
color:#۸A2BE2;
}

 

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

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

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
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;
}

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

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

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
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;
}

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

 

:before

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
p:before
{
content:"http://groupdesign.ir ";
}

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

:after

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

[/codesyntax]

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

 

:lang

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
p:lang(it)
{
background:yellow;
}

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

 

element1~element2

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
p~ul
{
background:#ff0000;
}

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

 

[attribute^=value]

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
div[class^="test"]
{
background:#ffff00;
}

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

 

[attribute$=value]

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
div[class$="test"]
{
background:#ffff00;
}

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

 

[attribute*=value]

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
div[class*="test"]
{
background:#ffff00;
}

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

 

:first-of-type

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
p:first-of-type
{
background:#ff0000;
}

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

:last-of-type

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

[/codesyntax]

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

 

:only-of-type

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
p:only-of-type
{
background:#ff0000;
}

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

 

:nth-child()

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
p:nth-child(۲)
{
background:#ff0000;
}

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

 

:nth-last-child()

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
p:nth-last-child(۲)
{
background:#ff0000;
}

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

 

:nth-of-type()

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
p:nth-of-type(۲)
{
background:#ff0000;
}

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

:nth-last-of-type()

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

[/codesyntax]

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

 

:last-child

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
p:last-child
{
background:#ff0000;
}

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

 

:root

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
:root
{
background:#ff0000;
}

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

 

:empty

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

:enabled

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

[/codesyntax]

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

 

:disabled

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
input[type="text"]:disabled
{
background:#dddddd;
}

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

 

:checked

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
input:checked
{
background:#ff0000;
}

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

 

:not

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
:not(p)
{
background:#ff0000;
}

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

 

::selection

Source code سلکتورهای css3 سلکتورهای css3 سلکتورهای css3 
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}

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

مطالب مرتبط

FOLLOW US