آموزش CSS3 : سلکتور ها
726 روز پیش
پويا صادقى , آموزش CSS
( این لینک برای اونایی که نمیدونن CSS چیه ) با توجه به اینکه اکثر مرورگرها دارن خودشونو با نگارش سوم CSS هماهنگ میکنن ، بهتره که سلکتور هایی که در این نسخه معرفی شده رو بشناسیم و ازشون استفاده کنیم
css 3 : attributes
شناسایی Attribute (ویژگی)
این ویژگی در CSS 2 معرفی شد که میشه تشخیص داد که آیا تگ ها از Attribute مورنظر استفاده میکنن یا نه:
img[alt=picture]{border:2px solid #FF0000;}
در کد بالا فقط IMG هایی که ویژگی ALT با متن “picture” براشون گذاشتیم Border قرمز میگیرن و بقیه عکس ها تغییر نمیکنن 
حالا در CSS3 این ویژگی گسترده تر شده:
a[href^="ftp:"]{color:#00FF00;}
در کد بالا فقط لینکهایی که اولشون ftp: داره سبزرنگ میشن!
a[href$=".org"]{color:#FF00FF;}
در کد بالا فقط لینکهایی که آخرشون پسوند .org داره صورتی میشن…
img[alt*=pouya]{border:2px solid #FFFF00;}
در کد بالا تمام تصاویری که توی ALTشون اسم من (!!!) باشه بوردر زرد میگیرن
. اکثر کد های CSS3 فقط در مرورگر های مدرن مثل کروم / سافاری / فایرفاکس / اپرا کارمیکنن!
ریشه
:root{background-color:#999999;}
این کد المنت ریشه صفحه رو بهش بکگراند خاکستری میده. (اون المنتی که بقیه المنت ها داخلش قرار میگیرن) حالا چه div باشه چه html باشه چه تیبل خدابیامرز ( ) فرق نمیکنه …
فرزند اول و فرزند آخر!!
p:first-child{background-color:#FF6600;}
کد بالا چیکار میکنه؟ اگه چند تا پاراگراف داشته باشیم، بکگراند اولین پاراگراف رو نارنجی میکنه.
( البته استفادش فقط پاراگراف نیست ها!! )
p:last-child{background-color:#FF6600;}
کد بالا هم از بین پاراگراف ها ، بکگراند اون آخریه (فرزند آخر) رو نارنجی میکنه…
NOT
div:not([class=style1]){background-color:#FF0000;}
خاصیت Not ویژگی مورد نظر رو منفی میکنه. مثلا در کد بالا تمام Divهایی که کلاس style1 ندارن بکگراند قرمز خواهند داشت
عناصر متوالی
h1 ~ h2{background:#666666;}
کد بالا رنگ بکگراند H2هایی که بعد از H1 بیایند رو خاکستری میکنه.
h1 + h2{background:#666666;}
کد بالا رنگ بکگراند H2هایی که بلافاصله بعد از H1 بیایند رو خاکستری میکنه.
