مسعود صدریCSSهای Pseudoمعرفی

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

Phil Collins

تعاریف و مفاهیم اولیه

بررسی ساختار کالس ها

بررسی ساختار المنت ها

نتیجه گیری

تعاریف و مفاهیم اولیه

بررسی ساختار کالس ها

بررسی ساختار المنت ها

نتیجه گیری

تعاریف و مفاهیم اولیه

Dictionary.com در ”pseudo“معنی لغت

adjective

1. Not actually but having the appearance of; pretended; false or spurious; sham.

2. Almost, approaching, or trying to be.

تعاریف و مفاهیم اولیه

CSS در زبان نشانه گذاری ”pseudo“مفهوم

به منظور تعریف یک حالت ویژه برای المنتی خاص استفاده می شوند.Pseudoکالس های

:link, :visited, :hover, :active, :first-child, :nth-child

تعاریف و مفاهیم اولیه

همیشه با ):( یا )::( شروع می شوند و بعد از آن نام کالس قرار می گیرد.Pseudo کالس های

:nth-child

تعاریف و مفاهیم اولیه

رفتار می کنند.HTML، آیتم های مجازی هستند که مانند المنت های معمول Pseudoالمنت های

آنها در ساختار درختی سند ما وجود ندارند.

ساخته می شوند.CSSبه این معنی که ما آنها را تایپ نمی کنیم، بلکه توسط

CSS در زبان نشانه گذاری ”pseudo“مفهوم

:after, :before, :first-letter

تعاریف و مفاهیم اولیه

بررسی ساختار کالس ها

بررسی ساختار المنت ها

نتیجه گیری

بررسی ساختار کالس ها

بعد از ثبت درخواست کاربر انجام می شوند.

Dynamicکالس های

:link, :visited, :hover, :active, :focus

بررسی ساختار کالس ها

a:link { color: #ccc;}

a:visited { color: #ccc;}

a:hover { color: #ccc;}

بررسی ساختار کالس ها

a:active { color: #ccc;}

a:focus { color: #ccc;}

بررسی ساختار کالس ها

اضافه می کنند.HTMLاطالعات جدیدی را به سند

Structuralکالس های

:first-child, :first-of-type, :last-child, :last-of-type, :nth-child

بررسی ساختار کالس ها

: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

بررسی ساختار کالس ها

: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

بررسی ساختار کالس ها

: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

بررسی ساختار کالس ها

استفاده می شود.HTML برای استایل دهی به یک یا چند المنت در سند nth-childکالس

است.Pseudoاین کالس، پرکاربردترین کwالس

NTH-CHILD:کالس

بررسی ساختار کالس ها

، مقادیری را به عنوان آرگومان در نظر می گیرند.nth کالس های Pseudoتمام

این مقادیر به دو صورت قابل پیاده سازی هستند:

an+bفرمول: •even یا oddکلمات کلیدی: • 

NTH-CHILD:کالس

بررسی ساختار کالس ها

a:.یک مقدار عددی )صحیح( است

n: .یک مقدار حرفی است. مانند متغیرها در فرمول های ریاضی

به عنوان عملگر در نظر گرفته می شود که می تواند - نیز باشید. :+

b: .یک مقدار دیگر عددی )صحیح( است ولی فقط زمانی نیاز است که از عملگرها استفاده شده باشد

:an+bفرمول

بررسی ساختار کالس ها

:nth-child(even)

:nth-child(odd)

:nth-child(2n+b)

کلمات کلیدیفرمول

بررسی ساختار کالس ها

<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

بررسی ساختار کالس ها

<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

بررسی ساختار کالس ها

<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

بررسی ساختار کالس ها

<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

بررسی ساختار کالس ها

nth-childمعرفی یک سرویس آنالین، برای محاسبه مقادیر

nth-calculator.com

تعاریف و مفاهیم اولیه

بررسی ساختار کالس ها

بررسی ساختار المنت ها

نتیجه گیری

بررسی ساختار المنت ها

:before, :after, ::selection, ::placeholder

، آیتم های مجازی هستند که مانند المنت های معمول Pseudoهمان طور که در ابتدا گفته شد، المنت های HTML.رفتار می کنند

آنها در ساختار درختی سند ما وجود ندارند.

بررسی ساختار المنت ها

<h1>Ricardo</h1>

h1:before { content: “Hello ”;}

HTML

CSS Hello Ricardo

:BEFORE

بررسی ساختار المنت ها

<h1>Ricardo</h1>

h1:after { content: “, Web Designer.”;}

HTML

CSS Ricardo, Web Designer.

:AFTER

بررسی ساختار المنت ها

::selection { color: #FFF; background: #CCC;}

::-moz-selection { color: #FFF; background: #CCC}

::SELECTION

استفاده می شود.HTML به منظور استایل دهی به قسمت انتخاب شده در سند selection::المنت

بررسی ساختار المنت ها

::PLACEHOLDER

در نظر گwرفته می شود.HTML برای متن پیشفرض در فرم های placeholder::المنت

هم نوشته می شود.input-placeholder::این المنت به صورت

بررسی ساختار المنت ها

::PLACEHOLDER

input::-moz-placeholder { color:#666;}

input::-webkit-input-placeholder { color:#666;}

<input type="email" placeholder="name@domain.com">

CSS HTML

تعاریف و مفاهیم اولیه

بررسی ساختار کالس ها

بررسی ساختار المنت ها

نتیجه گیری

نتیجه گیری

در عین سادگی، بسیار کاربردی هستند.Pseudoالمنت ها و کالس های

، باعث بهینه سازی کwدها می شوند.HTML، به دلیل کمتر شدن کالس ها در سند CSSاستفاده از این امکان زبان

و بهینه بودن کدها سبب توسعه ساده تر و افزایش سرعت بارگذاری خواهد بود.

ممنون از همراهی شما