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

8 / 10 از 18 کاربر

مرجع انتخابگرها در 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> ، لینک  http://pars-soft.ir  را اضافه میکند.

:after

p:after

content:"http://pars-soft.ir";
}

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

: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 مورد نظر را به آنها اعمال میکند.

 :only-of-type

p:only-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 مورد نظر را به آنها اعمال میکند.

:disabled

input[type="text"]:disabled
{
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 مورد نظر را به آنها اعمال میکند

مریم : نظر
25 2
آموزشها عالیه همه چیز سریع گفته شده فقط اگر در پایان دو ،سه مثال کلی میزدید و چند تا از دستورات ونحوه استفاده از آنهارو می آوردید خیلی بهتر می شد
:
12 6
بسيار بسيار آموزش خوبه
مهدی :
4 5
دم شما بسیار گرم خوب سایتی بود
وحید : تشکر از اموزش
2 3
دمت گرم ...خیلی خوب بود
عاطفه : واقعیت
2 1
وای عالیه این سایت .حرف نداره.
مهرداد :
2 1
سپاس گزارم بابت مطلب مفیدتون
پرشان.ا : تشکر
2 0
سایتتون واقعا مطالب جامع و آموزنده ای داره سپاسگزارم از زحمات و مطالب مفیدتون
عنوان نظر :
نام شما :
ایمیل :
تلفن تماس :
*
دانلود فایل آموزش html بصورت word

دانلود فایل آموزش html بصورت word

دانلود فایل آموزش html بصورت فایل word گردآوری شده از مقالات سایت بصورت یک جا آماده ی دانلود می باشد. این فایل به دلیل فرمت باز بودن word آن، مناسب برای تحقیق ها و تغییرات دلخواه می باشد. تمامی مقال ...
دانلود فایل آموزش html بصورت pdf

دانلود فایل آموزش html بصورت pdf

دانلود فایل آموزش html بصورت فایل pdf گردآوری شده از مقالات سایت بصورت یک جا آماده ی دانلود می باشد. تمامی مقالات وب سایت پارس سافت در زمینه ی آموزش html بنا به درخواست کاربران عزیز، بصورت یک جا در ی ...
نویسنده : بهاره شکری
تاریخ انتشار : 07/05/1392
تعداد بازدید : 10913