آموزش pseudo elements در CSS
شما میتوانید به بخشی از یک المان، تعدادی ویژگی اعمال کنید. برای مثال خط اول یک پاراگراف را به رنگ دیگری تبدیل کنید.
اول یک قطعه کد html و css بنویسیم.
<!DOCTYPE html> <html> <head> <title>lesson6</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="lesson6.css"> </head> <body> <div> <div> I'm a student I'm a student I'm a student </div> <div> I'm a teacher I'm a teacher I'm a teacher </div> <div> I'm a doctor I'm a doctor I'm a doctor </div> </div> </body> </html>
div{ background-color: pink; }
![آموزش pseudo element](https://farkiantech.com//wp-content/uploads/2021/10/css_6_1.png)
میبینید که کل جملات پشت سر هم قرار میگیرند. قبلا یاد گرفتیم که از تگ <br> برای رفتن به خط بعد استفاده کنیم. ولی بیاید اینبار از تگ <pre> استفاده کنیم.
<!DOCTYPE html> <html> <head> <title>lesson6</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="lesson6.css"> </head> <body> <div> <div> <pre>I'm a student I'm a student I'm a student</pre> </div> <div> <pre>I'm a teacher I'm a teacher I'm a teacher</pre> </div> <div> <pre>I'm a doctor I'm a doctor I'm a doctor</pre> </div> </div> </body> </html>
میبینید که تگ <pre> تمام space ها را هم در نظر میگیرد. مانند خط دوم و سوم هر div که به تعداد spaceی که قرار دارد، جلوتر چاپ شده است.
![آموزش pseudo elements در css](https://farkiantech.com//wp-content/uploads/2021/10/css_6_2.png)
ولی بیاید فعلا از تگ <br> استفاده کنیم.
<!DOCTYPE html> <html> <head> <title>lesson6</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="lesson6.css"> </head> <body> <div> <div> I'm a student<br> I'm a student<br> I'm a student </div> <div> I'm a teacher<br> I'm a teacher<br> I'm a teacher </div> <div> I'm a doctor<br> I'm a doctor<br> I'm a doctor </div> </div> </body> </html>
![pseudo element در css](https://farkiantech.com//wp-content/uploads/2021/10/css_6_3.png)
حال برای اعمال تغییرات توسط pseudo elements باید به صورت div::firstiline{ } تعریف کنیم. First-line تنها خط اول هر div را تغییر میدهد.
div{ background-color: pink; } div::first-line{ color: green; }
![pseudo element در html css](https://farkiantech.com//wp-content/uploads/2021/10/css_6_4.png)
فراموش نکنید که برای تعریف pseudo elements دوبار :: استفاده کنید و برای pseudo classes یک بار : استفاده کنید.
حال میتوانیم اولین حروف را با دستور first-letter تغییر دهیم. برای مثال رنگ آنها را قرمز و یا font-size را بزرگتر کنیم.
div{ background-color: pink; } div::first-line{ color: green; } div::first-letter{ color: red; font-size: x-large; }
![pseudo element چیست](https://farkiantech.com//wp-content/uploads/2021/10/css_6_5.png)
شما میتوانید همچنین در مرورگر، کد های خود را ببینید.
کافیست ctrl + u بزنید تا صفحه زیر باز شده و کد خود را ببینید.
![pseudo elment در css](https://farkiantech.com//wp-content/uploads/2021/10/css_6_6-768x397-1.png)
برای دیدن آموزش های بیشتر جزوات CSS را دنبال کنید.