آموزش CSS | معرفی انتخابگرها CSS Selectors

معرفی انتخابگرها CSS Selectors

انتخابگرها برای دادن الگوهای مورد نظر ما ، به عناصر به کاربرده میشوند. تمامی این انتخابگرها را با ذکر مثال توضیح میدهیم. ما به تعریف تک تک ویژگی های  انتخابگرها در ۳ قسمت میپردازیم :

  1. مرجع انتخابگرها در css ، بخش اول
  2. مرجع انتخابگرها در css ، بخش دوم
  3. مرجع انتخابگرها در 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 – بخش دوم

[attribute]

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

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

[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 – بخش سوم

 

: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:”https://AliGhavami.com“;
}

به اول تمام تگ های <p> ، لینک https://AliGhavami.com را اضافه میکند.

:after

p:after
{
content:”https://AliGhavami.com“;
}

بعد تمام تگ های <p>، لینک https://AliGhavami.com را اضافه میکند.

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

ارسال دیدگاه