با استفاده از تعریف CSSبرای شبه کلاس ها شما می توانید به بخشی از عناصر styleدهی نمایید.
عناصر شبه کلاس ها :
با استفاده از تعریف CSSبرای شبه کلاس ها شما می توانید به بخشی از عناصر styleدهی نمایید.
به طور مثال شما می توانید برای اولین حرف یا خط از یک عنصر styleمتفاوتی را در نظر بگیرید. و یا افزودن محتوا قبل یا بعد از محتوای یک عنصر
قواعد نوشتاری(syntax) شبه کلاس ها :
Selector::pseudo-element {
Property: value;
}
علامت :: که بعد از selector آمده در CSS3 می تواند جایگزین علامت : برای pseudo-elements شود اما این دو در استاندارد W3C برای تمایز بین pseudo-classes و pseudo-elements در نظر گرفته شده است.
علامت : در css1 و css2 برای pseudo-classes و pseudo-elements بکار گرفته می شود.
با توجه به مطالب بالا صرفا جهت هماهنگی، فرم : در css2 و css1 برای شبه عناصر (pseudo-elements) قابل قبول است.
The ::first-line Pseudo-element
برای استایل دادن به اولین خط از یک متن مورد استفاده قرار می گیرد.
این خاصیت فقط برای عناصر block جوابگو خواهد بود.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</body>
</html>
خواصی که با استفاده از این متد می توانید تغییر دهید عبارتند از :
-
font properties
-
color properties
-
background properties
-
word-spacing
-
letter-spacing
-
text-decoration
-
vertical-align
-
text-transform
-
line-height
-
clear
The ::first-letter Pseudo-element
برای استایل دادن به اولین حرف از یک متن مورد استفاده قرار می گیرد.
این خاصیت فقط برای عناصر block جوابگو خواهد بود.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>
خواصی که با استفاده از این متد می توانید تغییر دهید عبارتند از :
-
font properties
-
color properties
-
background properties
-
margin properties
-
padding properties
-
border properties
-
text-decoration
-
vertical-align (only if "float" is "none")
-
text-transform
-
line-height
-
float
-
clear
Pseudo-elements و CSS Classes :
شبه عناصر می توانند با شبه کلاس ها ترکیب شوند.به مثال زیر توجه نمایید:
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size:200%;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>
چندین Pseudo-elements :
چندین شبه عنصر می توانند با هم بصورت ترکیبی استفاده شوند. به مثال زیر در این باره توجه نمایید:
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>
before Pseudo-element::
از این خاصیت که بسیار مفید و کاربردی می باشد، برای افزودن محتوا قبل از محتوای عنصر استفاده می شود. برای روشن شدن مطلب توصیه می کنم حتما مثال زیر را داخل برنامه نوشته و اجرا کنید.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
</body>
</html>
after Pseudo-element::
این خاصیت کاربردی نیز دقیقا برعکس توضیحات بالا عمل می کند یعنی برای افزودن محتوا بعد از محتوای عنصر استفاده می شود.
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
</body>
</html>
selection Pseudo-element::
می توانید با استفاده از این خاصیت تعیین کنید وقتی بیننده متنی را انتخاب کرد چه استایلی به متن انتخابی داده شود. خواص قابل استفاده در این حالت عبارتند از : selection: color, background, cursor, and outline::
به مثال زیر توجه نمایید:
<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* Code for Firefox */
color: red;
background: yellow;
}
::selection {/* Code for all browsers except Ie8 and earlier */
color: red;
background: yellow;
}
</style>
</head>
<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
<p><strong>Note:</strong> ::selection is not supported in Internet Explorer 8 and earlier versions.</p>
<p><strong>Note:</strong> Firefox supports an alternative, the ::-moz-selection property.</p>
</body>
</html>
|
Selector |
Example |
Example description |
|
::after |
p::after |
Insert content after every <p> element |
|
::before |
p::before |
Insert content before every <p> element |
|
::first-letter |
p::first-letter |
Selects the first letter of every <p> element |
|
::first-line |
p::first-line |
Selects the first line of every <p> element |
|
::selection |
p::selection |
Selects the portion of an element that is selected by a user |