در این قسمت از فیلم آموزش CSS شبه عناصر یا Pseudo Element را آموزش خواهیم داد ، جلسه قبل هم که در مورد شبه کلاس ها آموزش داده بودیم .
شبه عناصر ( Pseudo Element ) :
با استفاده از این شبه عناصر می توانیم یک عنصر ایجاد کنیم و افکت یا جلوه های خاصی به عناصر HTML بدهیم . سینتکس شبه عناصر هم به صورت زیر است :
selector::pseudo-element{
}
شبه عنصر first-line
این شبه عنصر خط اول متن رو انتخاب می کند و به آن استایل می دهد . مانند سورس کد زیر :
کد CSS :
p::first-line{
color: blue;
font-size: 20px;
}
کد HTML :
<!Doctype html> <head> <title>Web30ty</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p> The Help for this program was created in Windows Help format,<br> which depends on a feature that isn't included in this version of Windows.<br> However, you can download a program that will allow you to view Help created in the Windows Help format. </p> </body> </html>
شبه عنصر first-letter
این شبه عنصر حرف اول متن را انتخاب می کند و اون استایلی که بهش دادیم را به اون حرف اول می دهد .
p::first-letter{
color: red;
font-size: 40px;
padding: 20px;
}
شبه عنصر Before
این شبه عنصر میاد به اون عنصری که انتخاب کردیم ، قبل از آن استایلی که دادیم رو اعمال می کند . مهم ترین خاصیتی که در Before و After وجود دارد Content هستش ، داخل Content اگر بین تک کوتیشن و یا دابل کوتیشن هر چیری بنویسید به همان صورت قبل از عنصر مورد نظر نمایش داده می شود .
p::before{
content: "Hello";
display: block;
color: red;
font-size: 16px;
}
اگر کد بالا را اجرا کنید Hello قبل از متن نمایش داده خواهد شد .
شبه عنصر After
شبه عنصر after میاد به بعد از اون عنصری که انتخاب کردید استایل می دهد و اگر خواستید متنی هم بنویسید باید آن را داخل Content بنویسید و آن متن بعد از عنصر مورد نظر نمایش داده می شود .
در before و after می تونید از عکس هم استفاده کنید مانند سورس زیر :
p::after{
content: url(image.png);
display: block;
padding:10px;
}
نکات مهم در مورد before و after :
مهم ترین نکته این است که ویژگی content فقط بر روی شبه عناصر before و after کاربرد دارد و بر روی عناصر دیگر کاربردی ندارد .
اگر از Content در before و after استفاده نکنید کدهایی که داخل اون ها می نویسید پنهان می شوند و اعمال نمی شوند پس اگر از before و after می خواهید استفاده کنید حتما باید از Content استفاده کنید .
حالا اگر با Content کاری نداشتید یعنی عکس و متن نمی خواستید قرار بدید باید Content را بنویسید و داخل کوتیشن هیچ چیزی ننویسید ، مانند ‘ ‘ :Content
شبه عنصر Selection
با استفاده از شبه عنصر selection می تونیم یک استایل خاصی به متنی که کاربر انتخاب می کند بدهیم یعنی زمانی که کلیک چپ را نگه می دارد و متن را انتخاب می کند .
در selection نمی تونیم از همه ویژگی های CSS استفاده کنیم بلکه باید از این ویژگی هایی استفاده کنیم که در سورس کد زیر استفاده شده است :
::selection{
color: red;
background: yellow;
cursor: pointer;
}
نکته مهم : شاید براتون سوال پیش بیاد که در جایی کدهای مربوط به before و after را که دیده باشید یدونه دو نقطه ( before: ) ولی اینجا چرا دوتا دونقطه ( before:: ) است ؟؟
چون در نسخه دوم CSS از شبه عناصر به این صورت استفاده می کردند before: و همان طور که در جلسه پیش دیدید در شبه کلاس ها هم از یدونه دونقطه استفاده می کردیم مثلاً hover: در شبه عناصر و شبه کلاس ها یدونه دونقطه بود ، در CSS3 برای این که تمایزی بین شبه کلاس ها و شبه عناصر به وجود بیارن اومدن از دوتا دو نقطه استفاده کردند .
