سودوها در CSS – سودو کلاس و سودو المنت
خوش اومدین به یازدهمین جلسه از دوره آموزش رایگان CSS. قراره که امروز با یه Selector دیگه توی CSS آشنا بشیم. ما تا اینجا برای element ها و کلاسها و ID های مختلف استایل دهی انجام دادیم. اما مواردی که تو این جلسه باهاشون آشنا میشیم به شکل فیزیکی توی فایل HTML ما وجود ندارند و به همین دلیل هم هست که بنام سودو Pseodu به معنای شبه یا کاذب نامگذاری شدند. البته ما با چند تا از اونها توی جلسه لینک در CSS آشنا شدیم. امروز قراره بصورت مفصل در مورد سودوها صحبت کنیم و با انواع اون آشنا بشیم. بطور کلی سودوها به دو دسته تقسیم میشن:
- Pseudo-classes سودو کلاس ها
- Pseudo-Elements سودو المنت ها
ما در این جلسه در مورد هر دو گروه صحبت میکنیم.
Pseudo-classes سودو کلاس ها در CSS
سودوکلاس (شبه کلاس) برای تعریف یه حالت خاص از یه عنصر استفاده میشه.
به عنوان مثال، میشه ازش برای موارد زیر استفاده کرد:
- زمانی که کاربر موس رو روی عنصری میبره
- استایل دهی متفاوت به لینک های بازدید شده و بازدیدنشده
- استایل به یه عنصر در لحظه فوکوس
- و…
سینتکس این گروه به شکل زیر هست:
selector:pseudo-class {
property: value;
}همونطور که در بالا میبینید ابتدا اسم selector خودمون رو مینویسیم سپس از دو نقطه استفاده میکنیم و بعد از اون نام سودوکلاس رو مینویسیم. مقدار دهی هم از سینتکس کلی css تبعیت میکنه. ویژگی دو نقطه مقدار ویژگی و نقطه ویرگول.
ما در همین دوره و در هنگام استایل دهی لینک با این ۴ سودو آشنا شدیم:
- a:link
- a:visited
- a:hover
- a:active
از سودو hover میتونیم برای دیگر تگ ها هم استفاده کنیم. به عنوان مثال ما در جلسه قبلی که در مورد استایل دهی جدول در CSS صحبت کردیم، از این سودو هم استفاده کردیم.
سودو کلاس first-child
ویژگی هایی که برای این سودوکلاس تعریف میکنیم به اولین عنصری از این نوع اختصاص پیدا میکنه. قطعه کد زیر رو ببینید:
p:first-child {
color: blue;
}
اگر ما تعدادی تگ p در یک گروه (داخل تگ دیگری) داشته باشیم میتونیم با استفاده از این سودوکلاس اولین تگ p داخل این گروه رو استایل دهی کنیم. در مثال بالا متن پاراگراف اول آبی رنگ میشه.
p i:first-child {
color: blue;
}
در قطعه کد بالا اولین تگ i که درون تگ p هست استایل دهی شده هست.تفاوتی نمیکند که چند بار از تگ i در داخل تگ p استفاده کرده باشیم، اولین مورد استایل دهی میشه.
Pseudo-Elements سودو المنت ها در CSS
یک سودو المنت میتونه روی استایل بخشی از یک المنت تاثیر بگذره. به عنوان مثال میشه از سودوالمنت توی موارد زیر استفاده کرد:
- میتونید اولین حرف یا خط یک عنصر را استایل دهی کنید
- قبل یا بعد از یه المنت محتوایی رو اضافه کنیم
- و…
سینتکس سودو المنت به شکل زیر هست:
selector::pseudo-element {
property: value;
}همینطور که میبینید سینتکس سودو المنت ها دقیقا مشابه سودوکلاس هست، با این تفاوت که بجای قرار دادن یک بار دو نقطه (:) دو دونقطه (::) قرار میدیم.
سودو المنت first-line
همونطور که از اسم این سودو المنت مشخص هست، مقداردهی به اولین خط از selector نسبت داده میشه.
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
استایل بالا برای اولین خط از تگ پاراگراف اعمال میشه.
برای سودو المنت first-line ویژگی های زیر در دسترس هست:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
سودوالمنت first-letter
همونطور که از اسم این سودوالمنت مشخص هست، مقداردهی به اولین کاراکتر از selector نسبت داده میشه.
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
استایل بالا برای اولین کاراکتر از تگ پاراگراف اعمال میشه.
برای سودوالمنت 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
سودوالمنت before
ما با استفاده از این سودوالمنت میتونیم محتوایی رو قبل از محتوای اصلی تگ اضافه کنیم. قطعه کد زیر رو ببینید:
h1::before {
content: url(smiley.gif);
}
با استفاده از قطعه کد بالا تصویر smiley.gif قبل از محتوای تگ h1 نمایش داده میشه.
سودوالمنت after
ما با استفاده از این سودوالمنت میتونیم محتوایی رو بعد از محتوای اصلی تگ اضافه کنیم. قطعه کد زیر رو ببینید:
h1::after {
content: url(smiley.gif);
}
با استفاده از قطعه کد بالا تصویر smiley.gif بعد از محتوای تگ h1 نمایش داده میشه.
سودوالمنت marker
همانطور که دردوره HTML یاد گرفتیم ما قادر بودیم لیست های متنوعی رو با استفاده از تگ های ul و ol ایجاد کنیم. ما با استفاده از این سودوالمنت میتونیم استایل اعداد، یا کاراکترهای لیست هامون رو مشخص کنیم.
::marker {
color: red;
font-size: 23px;
}
سودوالمنت Selection
زمانی که کاربر متنی رو داخل صفحه وب ما انتخاب میکنه، متن در حالت Selection قرار میگیره. ما میتونیم با استفاده از این سودوالمنت استایل متن در این وضعیت رو مشخص کنیم:
::selection {
color: red;
background: yellow;
}
