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

شبه کلاس ها (pseudo-class) در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش شبه کلاس ها (pseudo-class) در CSS با من همراه باشید.

شبه کلاس ها چه هستند؟

یک شبه کلاس (pseudo-class) در طراحی سایت با CSS برای تعریف یک حالت خاص از یک عنصر استفاده می شود. برای مثال می توان از آن در طراحی سایت برای موارد زیر استفاده کرد.

• تعیین سبک یک عنصر زمانی که کاربر، موس را بر روی آن عنصر قرار می دهد.

• ایجاد سبک متفاوت بین لینک های دیده شده و لینک های بازدید نشده

• ارائه سبک خاص به یک عنصر ، زمانی که بر روی آن تمرکز می شود

نحوه نوشتن شبه کلاس ها در سند css به شکل زیر است:

 

selector:pseudo-class {
property:value;
}

 

 


شبه کلاس های Anchor

لینک ها را می توان به روش های مختلفی نشان داد. در مثال زیر چند نمونه از روش های نمایش لینک ها در css را ارائه کرده ایم.

 

/* لینک های مشاهده نشده */
a:link {
color: #FF0000;
}

/* لینک های مشاهده شده */
a:visited {
color: #00FF00;
}

/* زمانی که موس بر روی لینک قرار می گیرد */
a:hover {
color: #FF00FF;
}

/* لینک های انتخاب شده */
a:active {
color: #0000FF;
}

 

 


شبه کلاس ها و کلاس ها در CSS

شبه کلاس می توانند با کلاس ها در CSS ترکیب شوند. لازم به ذکر است که شبه کلاس ها در css به کوچکی و بزرگی حروف حساس نیستند.

 

a.highlight:hover {
color: #ff0000;
}
div:hover {
background-color: blue;
}

 


شبه کلاس first-child: در css

شبه کلاس first-child: ، یک عنصر مشخص را که اولین فرزند یک عنصر دیگر است، تطبیق می دهد.

تطبیق اولین عنصر <p>

در مثال زیر در طراحی سایت ، سلکتور، هر عنصر <p> که اولین فرزند یک عنصر دیگر است را تطبیق داده است.

 

p:first-child {
color: blue;
}

 

 


شبه کلاس lang: در css

این شبه کلاس، به شما این امکان را می دهد تا قوانین خاصی برای زبان های مختلف در طراحی سایت ، تعریف کنید. در مثال زیر،شبه کلاس lang: ، برای عناصر <q>، با ترکیب “lang=”no، علامت کوتیشن را تعریف می کند.

 

<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

 


 focus:

از این برای استایل دادن به کادر در فرم ها استفاده می شود یعنی وقتی که کاربر روی کادر کلیک کرد استایل های داخل focus اعمال میشه .

input:focus{
 padding:10px;
 background-color:yellow;
 color: red;
 }

کد HTML :

<form action="#" method="post">
 <input type="text" name="text">
 </form>
 


only-of-type:

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

p:only-of-type{ 
padding: 10px; 
background: yellow;
 color: red; 
}

 


شبه کلاس‌ها

 

سلکتورتوضیح
active:هنگامی که کاربر فعالیتی روی یک عنصر انجام می‌دهد، مثلاً روی آن کلیک می‌کند، تطبیق می‌یابد.
any-link:با هر دو حالت link: و visited: لینک تطبیق می‌یابد.
blank:با یک عنصر input که مقدار آن خالی باشد، تطبیق می‌یابد.
checked:یا یک دکمه رادیویی یا چک‌باکس در حالت انتخاب‌شده، تطبیق می‌یابد.
current:با یک عنصر یا جد (والد و والدِ والد و …) عنصر که در حال نمایش است، تطبیق می‌یابد.
default:با یک یا چند عنصر UI که در میان مجموعه‌ای از عناصر مشابه، پیش‌فرض هستند، تطبیق می‌یابد.
dir:عنصری را بر مبنای جهت آن یعنی مقدار خصوصیت dir در HTML یا مشخصه direction در CSS تطبیق می‌دهد.
disabled:با آن عناصر رابط کاربری تطبیق می‌یابد که در حالت غیرفعال باشند.
empty:با عنصری تطبیق می‌یابد که فرزندی به جز احتمالاً فاصله خالی نداشته باشد.
enabled:با آن دسته از عناصر رابط کاربری تطبیق می‌یابد که در حالت فعال هستند.
first:در «رسانه صفحه‌بندی شده» (Paged Media) با صفحه نخست تطبیق می‌یابد.
first-child:با عنصری تطبیق می‌یابد که در میان هم‌نیاهای خود، اول باشد.
first-of-type:با عنصری تطبیق می‌یابد که در میان هم‌نیاهای خود از یک نوع مشخص، اول باشد.
focus:با عنصری تطبیق می‌یابد که فوکوس صفحه را در اختیار داشته باشد.
focus-visible:هنگامی تطبیق می‌یابد که عنصری فوکوس داشته باشد و این فوکوس برای کاربر نمایان باشد.
focus-within:با عنصری که فوکوس داشته باشد و همچنین عنصری که فوکوس را از دست داده است، تطبیق می‌یابد.
future:با عناصر پس از عنصر کنونی تطبیق می‌یابد.
hover:زمانی تطبیق می‌یابد که کاربر اشاره‌گر ماوس را روی عنصر ببرد.
indeterminate:با آن دسته از عناصر UI تطبیق می‌یابد که در حالت تعیین نشده باشند، مثلاً چک‌باکس‌ها می‌توانند چنین حالتی داشته باشند.
in-range:با عنصری تطبیق می‌یابد که دارای بازه‌ای باشد و مقدار واردشده در آن بازه باشد.
invalid:با عنصری مانند input تطبیق می‌یابد که در حالت نامعتبر باشد.
lang:با یک عنصر بر مبنای زبان (مقدار خصوصیت lang در HTML) تطبیق می‌یابد.
last-child:با عنصری که در میان هم‌نیاهای خود آخر باشد، تطبیق می‌یابد.
last-of-type:با عنصری تطبیق می‌یابد که در میان همنوعان خود آخر باشد.
left:در «رسانه صفحه‌بندی شده» (Paged Media) با صفحه‌های سمت چپ تطبیق می‌یابد.
link:با لینک‌های بازدید نشده تطبیق می‌یابد.
local-link:با لینک‌هایی تطبیق می‌یابد که به صفحه‌هایی اشاره می‌کنند که در همان سایت مربوط به صفحه کنونی قرار دارند.
()is:با هر کدام از سلکتورها در لیست سلکتور که به آن ارسال شود، تطبیق می‌یابد.
not:با چیزهایی تطبیق می‌یابد که از سوی سلکتورهایی که به عنوان مقدار این سلکتور ارسال شده‌اند تطبیق نیافته‌اند.
nth-child:با عنصری از لیست هم‌نیاها تطبیق می‌یابد. هم‌نیاها با فرمولی به شکل an+b تطبیق می‌یابند. برای نمونه 2n+1 با عناصر 1، 3، 5، 7 و غیره تطبیق می‌یابد که شامل عناصر فرد می‌شود.
nth-of-type:با عناصری از لیست هم‌نیاها که از نوع خاصی هستند (برای نمونه عناصر

) تطبیق می‌یابد. هم‌نیاها با فرمولی به شکل an+b تطبیق می‌یابند، یعنی 2n+b می‌تواند با آن نوع از عناصر، به شماره‌های 1، 3، 5، 7 و غیره یعنی شماره‌های فرد تطبیق یابد.

nth-last-child:با عنصری از لیستی از هم‌نیاها تطبیق می‌یابد که از انتها به اول شمرده می‌شوند و فرمولی به شکل an+b دارند. برای مثال n2+1 با عنصر آخر یک دنباله، سپس عنصر دو تا به آخر مانده و سپس دو عنصر ماقبل آن و همین‌طور تا اول تطبیق می‌یابد. بدین ترتیب همه عناصر با شماره‌های فرد با شمارش از آخر به اول تطبیق می‌یابند.
nth-last-of-type:با عناصری از لیست هم‌نیاها که از نوع خاصی هستند (مثلاً عناصر

) تطبیق می‌یابد که از آخر به اول شمرده می‌شوند. هم‌نیاها با فرمول an+b شمرده می‌شوند. برای نمونه 2n+1 با عنصر آخر از آن نوع خاص در دنباله و سپس عنصر دو تا مانده به آخر و عنصر دو تا مانده به قبلی و همین‌طور تا اول تطبیق می‌یابد. به این ترتب همه عناصر فرد با شمارش از آخر به اول تطبیق می‌یابند.

only-child:با عنصری که هیچ هم‌نیا ندارد تطبیق می‌یابد.
only-of-type:با عنصری که تنها مورد از نوع خود در میان هم‌نیاها باشد تطبیق می‌یابد.
optional:با عناصری که الزامی نیستند، تطبیق می‌یابد.
out-of-range:با عنصری دارای بازه تطبیق می‌یابد که مقدار ورودی خارج از بازه مورد نظر باشد.
past:با عنصری تطبیق می‌یابد که قبل از عنصر کنونی قرار دارد.
placeholder-shown:با یک عنصر ورودی که متن placeholder را نمایش می‌دهد تطبیق می‌یابد.
playing:با عنصری تطبیق می‌یابد که یک منبع صوتی، ویدئویی یا مشابه را نمایش می‌دهد و قابلیت پخش شدن یا مکث یافتن را دارد و اینک به صورت «در حال پخش» (playing) درآمده است.
paused:با عنصری تطبیق می‌یابد که یک منبع صوتی، ویدئویی یا مشابه را نمایش می‌دهد و قابلیت پخش شدن یا مکث یافتن را دارد و اینک به صورت «در حال مکث» (paused) درآمده است.
read-only:با عنصری تطبیق می‌یابد که قابلیت دستکاری از سوی کاربر ندارد.
read-write:با عنصری تطبیق می‌یابد که قابلیت دستکاری از سوی کاربر را دارد.
required:با عنصری تطبیق می‌یابد که الزامی باشد.
right:در «رسانه‌های صفحه‌بندی شده» (Paged Media) با صفحه‌های سمت راست تطبیق می‌یابد.
root:با عنصری تطبیق می‌یابد که ریشه سند باشد.
scope:با عنصری تطبیق می‌یابد که دارای دامنه است.
valid:با عنصری مانند یک عنصر input تطبیق می‌یابد که در حالت معتبر باشد.
target:با عنصری تطبیق می‌یابد که هدف URL جاری باشد، یعنی یک ID مطابق بخش URL جاری داشته باشد.
visited:با لینک‌های بازدید شده تطبیق می‌یابد.

 

 

 


امیدواریم آموزش شبه کلاس ها (pseudo-class) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
csspseudo class csspseudo class css w3schoolpseudo class در cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسشبه کلاس ها (pseudo-class) در CSSشبه کلاس ها در cssفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟