سلکتورهای CSS3

آموزش selector CSS3 CSS  سلکتورهای CSS3   Pouya Saadeghi

اگه نمی‌دونید CSS چیه:

الگوهای آبشاری یا روی‌انداز آبشاری سَبْک یا سی‌اس‌اس (به انگلیسی: CSS: Cascading Style Sheets)‏ در کنار اچ‌تی‌ام‌ال هسته‌ی فناوری ساخت صفحه‌های وب هستند. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. الگوهای آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند -توضیحات بیشتر در ویکی پدیا

با توجه به اینکه اکثر مرورگرها دارن خودشونو با نگارش سوم CSS هماهنگ میکنن  ، بهتره که سلکتور هایی که در این نسخه معرفی شده رو بشناسیم و ازشون استفاده کنیم

شناسایی Attributeها

این ویژگی در CSS 2 معرفی شد که میشه تشخیص داد که آیا تگ ها از Attribute مورنظر استفاده میکنن یا نه:

img[alt=picture]{border:2px solid #FF0000;}

در کد بالا فقط IMG هایی که ویژگی ALT با متن “picture” براشون گذاشتیم Border قرمز میگیرن و بقیه عکس ها تغییر نمیکنن آموزش selector CSS3 CSS  سلکتورهای CSS3   Pouya Saadeghi حالا در 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 باشه یا هر عنصر دیگه، فرق نمیکنه.

فرزند اول و فرزند آخر
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 بیایند رو خاکستری میکنه.

نوشته شده توسط پویا صادقی

بیشتر بخونید:

شبه عنصرها در CSSتغییر شکل دوبعدی در CSS3
پاسارگاد گرافیک در گوگل پلاس
پاسارگاد گرافیک را دنبال کنید!