Pseudoها در CSS برای توسعه دهندگان Front-end یک مفهوم آشنا و بسیار کاربردی هستند. المان‌ها و کلاس‌های Pseudo به روش‌های متنوعی قابل استفاده می‌باشند که هر کدام از آنها به نوعی، سبب استایل‌دهی صحیح و بهینه‌سازی کدهای CSS می‌شوند. شروع آنها از نسخه دوم CSS بود و در CSS3 پیشرفته‌تر شدند. نکته بسیار مهم درک زمان درست استفاده از این امکان CSS است، این که کجا و برای کدام نیاز در توسعه Front-end باید از این کلاس‌ها استفاده کنیم. هدف ما بررسی دقیق‌تر المان‌های Pseudo و نحوه استفاده صحیح آنها در قسمت‌های مختلف کدهای CSS است.

1. ‫صدری‬ ‫مسعود‬
‫معرفی‬Pseudo‫های‬CSS

2. “In learning you will teach, and in teaching you will learn.”
Phil Collins

3. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬
‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬
‫گیری‬ ‫نتیجه‬

4. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬
‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬
‫گیری‬ ‫نتیجه‬

5. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬
‫لغت‬ ‫معنی‬“pseudo”‫در‬Dictionary.com
adjective
1. Not actually but having the appearance of; pretended; false or spurious; sham.
2. Almost, approaching, or trying to be.

6. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬
‫مفهوم‬“pseudo”‫گذاری‬ ‫نشانه‬ ‫زبان‬ ‫در‬CSS
‫های‬‫کالس‬Pseudo‫شوند‬‫می‬ ‫استفاده‬ ‫خاص‬ ‫المنتی‬ ‫برای‬ ‫ویژه‬ ‫حالت‬ ‫یک‬ ‫تعریف‬ ‫منظور‬ ‫به‬.
:link, :visited, :hover, :active, :first-child, :nth-child

7. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬
‫های‬‫کالس‬Pseudo‫همیشه‬‫با‬):(‫یا‬)::(‫گیرد‬‫می‬ ‫قرار‬ ‫کالس‬ ‫نام‬ ‫آن‬ ‫از‬ ‫بعد‬ ‫و‬ ‫شوند‬‫می‬ ‫شروع‬.
:nth-child

8. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬
‫های‬‫المنت‬Pseudo‫معمول‬ ‫های‬‫المنت‬ ‫مانند‬ ‫که‬ ‫هستند‬ ‫مجازی‬ ‫های‬‫آیتم‬ ،HTML‫کنند‬‫می‬ ‫رفتار‬.
‫ندارند‬ ‫وجود‬ ‫ما‬ ‫سند‬ ‫درختی‬ ‫ساختار‬ ‫در‬ ‫آنها‬.
،‫کنیم‬‫نمی‬ ‫تایپ‬ ‫را‬ ‫آنها‬ ‫ما‬ ‫که‬ ‫معنی‬ ‫این‬ ‫به‬‫بلکه‬‫توسط‬CSS‫شوند‬‫می‬ ‫ساخته‬.
‫مفهوم‬“pseudo”‫گذاری‬ ‫نشانه‬ ‫زبان‬ ‫در‬CSS
:after, :before, :first-letter

9. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬
‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬
‫گیری‬ ‫نتیجه‬

10. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
‫شوند‬‫می‬ ‫انجام‬ ‫کاربر‬ ‫درخواست‬ ‫ثبت‬ ‫از‬ ‫بعد‬.
‫های‬‫کالس‬Dynamic
:link, :visited, :hover, :active, :focus

11. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
a:link {
color: #ccc;
}
a:visited {
color: #ccc;
}
a:hover {
color: #ccc;
}

12. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
a:active {
color: #ccc;
}
a:focus {
color: #ccc;
}

13. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
‫سند‬ ‫به‬ ‫را‬ ‫جدیدی‬ ‫اطالعات‬HTML‫کنند‬‫می‬ ‫اضافه‬.
‫های‬‫کالس‬Structural
:first-child, :first-of-type, :last-child, :last-of-type, :nth-child

14. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
:FIRST-CHILD
li:first-child {
color: red;
}
<ul>
<li>This text will be red.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
CSS HTML

15. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
:FIRST-OF-TYPE
ul:first-of-type {
color: red;
}
<ul>
<li>This text will be red.</li>
<li>Lorem ipsum dolor sit amet.
<span>
This text will be red.
</span>
</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
CSS HTML

16. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
:LAST-OF-TYPE
ul:last-of-type {
color: red;
}
<ul>
<li>Lorem ipsum dolor sit amet.
<span>Lorem ipsum dolor sit</span>
<span>This text will be red</span>
</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>This text will be red.</li>
</ul>
CSS HTML

17. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
‫کالس‬nth-child‫سند‬ ‫در‬ ‫المنت‬ ‫چند‬ ‫یا‬ ‫یک‬ ‫به‬ ‫دهی‬ ‫استایل‬ ‫برای‬HTML‫شود‬‫می‬ ‫استفاده‬.
‫کالس‬ ‫پرکاربردترین‬ ،‫کالس‬ ‫این‬Pseudo‫است‬.
‫کالس‬:NTH-CHILD

18. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
‫تمام‬Pseudo‫های‬‫کالس‬nth‫گیرند‬‫می‬ ‫نظر‬ ‫در‬ ‫آرگومان‬ ‫عنوان‬ ‫به‬ ‫را‬ ‫مقادیری‬ ،.
‫هستند‬ ‫سازی‬ ‫پیاده‬ ‫قابل‬ ‫صورت‬ ‫دو‬ ‫به‬ ‫مقادیر‬ ‫این‬:
•‫فرمول‬:an+b
•‫کلمات‬‫کلیدی‬:odd‫یا‬even
‫کالس‬:NTH-CHILD

19. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
a:‫عددی‬ ‫مقدار‬ ‫یک‬(‫صحیح‬)‫است‬.
n:‫است‬ ‫حرفی‬ ‫مقدار‬ ‫یک‬.‫ریاضی‬ ‫های‬‫فرمول‬ ‫در‬ ‫متغیرها‬ ‫مانند‬.
+:‫تواند‬‫می‬ ‫که‬ ‫شود‬‫می‬ ‫گرفته‬ ‫نظر‬ ‫در‬ ‫عملگر‬ ‫عنوان‬ ‫به‬-‫باشید‬ ‫نیز‬.
b:‫عددی‬ ‫دیگر‬ ‫مقدار‬ ‫یک‬(‫صحیح‬)‫باشد‬ ‫شده‬ ‫استفاده‬ ‫عملگرها‬ ‫از‬ ‫که‬ ‫است‬ ‫نیاز‬ ‫زمانی‬ ‫فقط‬ ‫ولی‬ ‫است‬.
‫فرمول‬an+b:

20. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
:nth-child(even)
:nth-child(odd)
:nth-child(2n+b)
‫فرمول‬‫کلیدی‬ ‫کلمات‬

21. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
<ol>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
<li>Delta</li>
<li>Epsilon</li>
<li>Zeta</li>
<li>Eta</li>
<li>Theta</li>
<li>Iota</li>
<li>Kappa</li>
</ol>
ol:nth-child (2) {
color: red;
}
HTML CSS
“Beta” will be red.
:NTH-CHILD

22. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
<ol>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
<li>Delta</li>
<li>Epsilon</li>
<li>Zeta</li>
<li>Eta</li>
<li>Theta</li>
<li>Iota</li>
<li>Kappa</li>
</ol>
ol:nth-child (2n) {
color: red;
}
HTML CSS
“Beta”, “Delta”, “Zeta”, “Theta”, “kappa”
will be red.
:NTH-CHILD

23. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
<ol>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
<li>Delta</li>
<li>Epsilon</li>
<li>Zeta</li>
<li>Eta</li>
<li>Theta</li>
<li>Iota</li>
<li>Kappa</li>
</ol>
ol:nth-child (even) {
color: red;
}
HTML CSS
“Beta”, “Delta”, “Zeta”, “Theta”, “Kappa”
will be red.
:NTH-CHILD

24. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
<ol>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
<li>Delta</li>
<li>Epsilon</li>
<li>Zeta</li>
<li>Eta</li>
<li>Theta</li>
<li>Iota</li>
<li>Kappa</li>
</ol>
ol:nth-child (2n+6) {
color: red;
}
HTML CSS
“Zeta”, “Theta”, “kappa” will be red.
:NTH-CHILD

25. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
‫مقادیر‬ ‫محاسبه‬ ‫برای‬ ،‫آنالین‬ ‫سرویس‬ ‫یک‬ ‫معرفی‬nth-child
nth-calculator.com

26. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬
‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬
‫گیری‬ ‫نتیجه‬

27. ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬
:before, :after, ::selection, ::placeholder
‫های‬‫المنت‬ ،‫شد‬ ‫گفته‬ ‫ابتدا‬ ‫در‬ ‫که‬ ‫طور‬ ‫همان‬Pseudo‫معمول‬ ‫های‬‫المنت‬ ‫مانند‬ ‫که‬ ‫هستند‬ ‫مجازی‬ ‫های‬‫آیتم‬ ،HTML‫کنند‬‫می‬ ‫رفتار‬.
‫ندارند‬ ‫وجود‬ ‫ما‬ ‫سند‬ ‫درختی‬ ‫ساختار‬ ‫در‬ ‫آنها‬.

28. ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬
<h1>Ricardo</h1>
h1:before {
content: “Hello ”;
}
HTML
CSS Hello Ricardo
:BEFORE

29. ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬
<h1>Ricardo</h1>
h1:after {
content: “, Web Designer.”;
}
HTML
CSS Ricardo, Web Designer.
:AFTER

30. ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬
::selection {
color: #FFF;
background: #CCC;
}
::-moz-selection {
color: #FFF;
background: #CCC
}
::SELECTION
‫المنت‬::selection‫سند‬ ‫در‬ ‫شده‬ ‫انتخاب‬ ‫قسمت‬ ‫به‬ ‫دهی‬ ‫استایل‬ ‫منظور‬ ‫به‬HTML‫شود‬‫می‬ ‫استفاده‬.

31. ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬
::PLACEHOLDER
‫المنت‬::placeholder‫های‬‫فرم‬ ‫در‬ ‫پیشفرض‬ ‫متن‬ ‫برای‬HTML‫شود‬‫می‬ ‫گرفته‬ ‫نظر‬ ‫در‬.
‫صورت‬ ‫به‬ ‫المنت‬ ‫این‬::input-placeholder‫شود‬‫می‬ ‫نوشته‬ ‫هم‬.

32. ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬
::PLACEHOLDER
input::-moz-placeholder {
color:#666;
}
input::-webkit-input-placeholder {
color:#666;
}
<input type="email" placeholder="name@domain.com">
CSS HTML

33. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬
‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬
‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬
‫گیری‬ ‫نتیجه‬

34. ‫گیری‬ ‫نتیجه‬
‫های‬‫کالس‬ ‫و‬ ‫ها‬‫المنت‬Pseudo‫هستند‬ ‫کاربردی‬ ‫بسیار‬ ،‫سادگی‬ ‫عین‬ ‫در‬.
‫زبان‬ ‫امکان‬ ‫این‬ ‫از‬ ‫استفاده‬CSS‫سند‬ ‫در‬ ‫ها‬‫کالس‬ ‫شدن‬ ‫کمتر‬ ‫دلیل‬ ‫به‬ ،HTML‫شوند‬‫می‬ ‫کدها‬ ‫سازی‬ ‫بهینه‬ ‫باعث‬ ،.
‫بود‬ ‫خواهد‬ ‫بارگذاری‬ ‫سرعت‬ ‫افزایش‬ ‫و‬ ‫تر‬‫ساده‬ ‫توسعه‬ ‫سبب‬ ‫کدها‬ ‫بودن‬ ‫بهینه‬ ‫و‬.

35. ‫شما‬ ‫همراهی‬ ‫از‬ ‫ممنون‬