طراحی وب سایت با 10 انتخابگر فراموش شده css

هر باری که از css در طراحی وب سایت استفاده می کنید برخی از انتخابگرهای  مهم آن به دست فراموشی سپرده می شود.ما دائما از تحولات بزرگ در CSS3 می گوییم و می نویسیم، اما اغلب اصول اولیه کد نویسی با css را فراموش کرده ایم.

با وجود انتخابگرهای پیشرفته تر می توانیم کد نویسی بهتر و ظریف تری را در هنگام طراحی وب سایت استاندارد ارائه دهیم در این مقاله انتخابگرهای  مهم css که اغلب در طراحی سایت فراموش می شود را با هم مرور کمی کنیم.

طراحی وب سایت با 10 انتخابگر فراموش شده css

طراحی وب سایت با 10 انتخابگر فراموش شده css

*

این انتخابگر تمامی عناصر را انتخاب می کند  و استایل مورد نظر را بر روی آن ها اعمال می کند.

a+b

تمامی عناصر را بلافاصله بعد از خود انتخاب می کند.برای درک بهتر به مثال زیر توجه کنید:

div+p
{
background-color:yellow;
}

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

A > B

این انتخابگر در طراحی سایت فرزندان سطح اول را اتنتخاب می کند که بر عکس آن نیز وجود دارد برای درک بهتر به مثال زیر توجه کنید:

div>p{
background-color:yellow;
}

تمام تگ های p که  والد آن ها تگ div می باشد راانتخاب می کند.

::selection

محتوایی که با دو بار کلیک کردن بر روی صفحه انتخاب می شود را تحت تاثیر قرار می دهد.

::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}

:not

تنها استایل بر تگی اعمال می شود که در مقابل not قرار گرفته است برای درک بهتر به مثال زیر توجه کنید:

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

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

:nth-child()

به صورت عدد داده شده فرزند تگ مورد نظر را انتخاب می کند برای درک بهتر به مثال زیر توجه کنید:

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

تگ p که دومین فرزند , والد خود باشد را انتخاب و استایل مورد نظر را بر روی آن اعمال می کند.

:before

p:before
{
content:"http://webcity.ir ";
}

به اول تمام تگ های p ، لینک http://webcity.ir را اضافه خواهد کرد.

:after

p:after
{
content:"http://webcity.ir";
}

بعد تمام تگ های p لینک http://webcity.ir را اضافه خواهد کرد.

:first-letter

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

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

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

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;
}