آموزش Pseudo کلاس و المنت در CSS و کاربرد آنها

از
فهرست مطالب پنهان
root:
checked:
First-Child و LastChild
nth-child(4)
not:
empty:
سودو المنت ها
after – before
Selection::

سودو کلاس ها، در واقع کلاس هایی هستند که با : در کد سی اس اس قابل استفاده است. در ادامه برخی از Pseudo-classes توضیح داده شده است، برای کسب اطلاعات بیشتر می توانید این لینک را مشاهده کنید.

root:

این کلاس در واقع شبیه به html است و کدهای اعمالی به آن به تگ html اعمال می شود. و نسبت به خود Html اولویت بیشتری دارد. می توانید مثال زیر رو مشاهده کنید.

:root {
    background-color: Blue;
 }
 /*
در حالت عادی کد دوم یعنی html باید اعمال بشه و رنگ زمینه قرمز بشه
ولی چون اولویت root بیشتره به همین خاطر رنگ پس زمینه قرمز رنگ میشه 
*/
html {
    background-color: red;
}

checked:

این کلاس در اصل برای بررسی چک خوردن یک آیتم input استفاده میشود. برای مثال می توانید کد زیر رو مشاهده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .alert{
            display: none;
        }
        /*
         با علامت + مشخص میکنیم که بعد از چک باکس اولین المانی که کلاس alert رو گرفته
        اگه علامت ~ رو میذاشتیم بیشتر از یه دونه اگه بعدش المانی کلاس alert رو داشت انتخاب میکرد 
        */
        .checkbox_test:checked + .alert {
            display: block;
        }
    </style>
</head>
<body>
    <input type="checkbox" class="checkbox_test">
    <p class="alert"> با زدن تیک چک باکس، این گزینه نمایش داده شود. </p>
</body>
</html>

First-Child و LastChild

توسط این دو کلاس می توانیم اولین فرزند و آخرین فرزند یک لیست یا مجموعه رو انتخاب کنیم. که روش استفاده بصورت زیر است.

ul.mylist li:last-child {
    color: red;
}
ul.mylist li:first-child {
    color: blue;
}

nth-child(4)

توسط کلاس nth-child می توانیم شماره فرزند رو بدیم تا اون گزینه انتخاب بشه، و یا اینکه می توانیم توسط even و odd زوج و فرد رو مشخص کنیم تا یکی در میان فرزند ها انتخاب بشن. نمونه کد زیر رو مشاهده کنید:

ul.mylist li:nth-child(5) {
    color: red;
}
ul.mylist li:nth-child(even) {
    color: red;
}
ul.mylist li:nth-child(odd) {
    color: red;
}

not:

اگر تمامی فرزند های یک لیست رو انتخاب کنیم ولی میخواهیم یکیش رو مد نظر نداشته باشیم و انتخاب کنیم، می توانیم توسط not این کار رو بکنیم.

ul.mylist li:not(.deleted) {
    color: red;
}

empty:

گاها پیش میاد بخواهیم به المان های خالی یک استایلی بدیم، برای مثال می تونید کد زیر رو ببینید:

.container:empty {
    background-color: red;
}

سودو المنت ها

after – before

یودو المنت ها در واقع جزء المان های html قرار میگیرن ولی کدشون میان کدهای css زده میشه که از معروف ترین هاش after و before هست، در ادامه توضیح داده شده است.

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

.container h2.title::before { /* قبل از اچ دو */
    content: "icon / text / code ,...";
}
.container h2.title::after { /* بعد از اچ دو */
    content: "icon / text / code ,...";
}

Selection::

زمانی که با ماوس قسمتی از متن رو هایلایت می کنیم در واقع سلکشن شده، از طریق این المنت کلاس می توانیم این قسمت رو تغییر بدین، مثلا بصورت پیش فرض رنگ سلکت متن آبی هست و ما از طریق این کد می توانیم رنگش رو تغییر بدیم، زیاد کاربردی نیست.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

دیدگاهتان را بنویسید