تمام انتخابگرها در css را بشناسید و تمرین کنید

انتخابگرها در css

سلام دوستان همیشگی پشتیبان وب

امیدوار هستیم آموزش های قبلی ما را در زمینه css دنبال کرده باشید  دنبال کرده باشید.خب اگر آماده هستید به سراغ آموزش بعدی برویم. اگر هم مطالعه نکردید می تونید در لینک زیر آن ها را مطالعه کنید.

قبل از شروع آموزش های قبلی را حتما بخوانید  !

در این جلسه قصد داریم درباره موضوع مرجع انتخابگرها در 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 مورد نظر را به آنها اضافه می کند.

element+element

div+p
{ 
background-color:yellow;
}

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

[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 مورد نظر را به آنها اضافه می کند.

first-letter

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

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

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

  • 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  میتوانند مورد استفاده قرار بگیرند.

  • background properties
  • color properties
  • font 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

p:before
{ 
content:"https://supportwebs.ir/blog/ ";
}

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

:after

p:after
{ 
content:"https://supportwebs.ir/blog/";
}

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

:lang

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

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

[attribute^=value]

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

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

امیدوار هستیم این آموزش برای شما مفید بوده باشد حتماً این آموزش ها را تمرین کنید تا خوب خوب یاد بگیرید.

 

از سال 86 فعالیتم رو در حوزه IT شروع کردم و علاقمند فناوری جدید در حوزه IT شدم ، از همان سال های اولیه به فکر راه اندازی کسب کار بودم و تا اینکه خودم رو به عنوان کار افرین پیدا کردم و عاشق کار افرینی شدم . در حال حاضر یک توسعه دهنده حرفه ای هستم و عاشق خدمت رسانی به مردم کشورم ....

ارسال دیدگاه

* .ایمیل ادرس شما منتشر نخواهد شد