گروه مقاله : CSS
تاريخ انتشار : 1394/02/03 - 11:07
كد :238
شبه کلاس ها برای تعریف حالت خاصی از یک عنصر مورد استفاده قرار می گیرند.
شبه کلاس ها برای تعریف حالت خاصی از یک عنصر مورد استفاده قرار می گیرند.
بطور مثال در این حالت می توانید تعریف کنید زمانی که ماوس روی عنصر مورد نظر رفت style آن تغییر کند.
یا مثلا چنانچه یک لینک قبلا مشاهده شده بود نسبت به سایر لینک ها که قبلا مشاهده شده اند style متفاوتی داشته باشند.
قاعده نوشتاری برای این حالت (syntax) :
Selector:pseudo-class {
Property: value;
}
شبه کلاس هایی که برای لینک ها بکار می روند.
-
a:hover : حالتی که ماوس روی لینک قرار دارد و باید بعد از a:link قرار بگیرد.
-
a:active : لحظه کلیک کردن بر روی لینک و باید بعد از a:hover قرار بگیرد.
-
a:visited : لینکی که قبلا بر روی آن کلیک شده
به مثال زیر توجه نمایید :
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
توجه : شبه کلاس ها به حروف کوچک و بزرگ حساس نیستند.
شبه کلاس ها و CSS کلاس ها :
شبه کلاس ها می تواند برای سایر کلاس های CSS (نه فقط برای لینک ها) مورد استفاده قرار بگیرند.
<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
}
</style>
</head>
<body>
<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
<p><a href="default.asp">CSS Tutorial</a></p>
</body>
</html>
first-childe pseudo-class :
در این شرایط به اولین عنصر از یک نوع می توان style داد.
نکته : first-child در مرورگرهای ie8 و ما قبل کار نمی کند مگر آنکه حتما از DOCTYPE! استفاده نمایید.
در مثال زیر به اولین تگ <p> استایل داده شده است.
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
در مثال زیر به اولین تگ <i> داخل تمام تگ های <p> استایل داده شده است.
<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
در این مثال به تمام تگ های <i> اولین تگ <p> استایل داده شده است.
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
شبه کلاس زبان در CSS :
این خاصیت به شما اجازه می دهد تا قوانین خاصی را برای زبان های مختلف بیان کنید.
به مثال زیر توجه نمایید:
<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>
<p><b>Note:</b> IE8 supports the :lang pseudo class only if a !DOCTYPE is specified.</p>
</body>
</html>
نکته : مرورگرهایIe8 و ما قبل از این خاصیت پشتیبانی نمی کنند مگر اینکه از DOCTYPE! استفاده نمایید.
تمامی شبه کلاس های موجود در CSS :
|
Selector |
Example |
Example description |
|
:active |
a:active |
Selects the active link |
|
:checked |
input:checked |
Selects every checked <input> element |
|
:disabled |
input:disabled |
Selects every disabled <input> element |
|
:empty |
p:empty |
Selects every <p> element that has no children |
|
:enabled |
input:enabled |
Selects every enabled <input> element |
|
:first-child |
p:first-child |
Selects every <p> elements that is the first child of its parent |
|
:first-of-type |
p:first-of-type |
Selects every <p> element that is the first <p> element of its parent |
|
:focus |
input:focus |
Selects the <input> element that has focus |
|
:hover |
a:hover |
Selects links on mouse over |
|
:in-range |
input:in-range |
Selects <input> elements with a value within a specified range |
|
:invalid |
input:invalid |
Selects all <input> elements with an invalid value |
|
:lang(language) |
p:lang(it) |
Selects every <p> element with a lang attribute value starting with "it" |
|
:last-child |
p:last-child |
Selects every <p> elements that is the last child of its parent |
|
:last-of-type |
p:last-of-type |
Selects every <p> element that is the last <p> element of its parent |
|
:link |
a:link |
Selects all unvisited links |
|
:not(selector) |
:not(p) |
Selects every element that is not a <p> element |
|
:nth-child(n) |
p:nth-child(2) |
Selects every <p> element that is the second child of its parent |
|
:nth-last-child(n) |
p:nth-last-child(2) |
Selects every <p> element that is the second child of its parent, counting from the last child |
|
:nth-last-of-type(n) |
p:nth-last-of-type(2) |
Selects every <p> element that is the second <p> element of its parent, counting from the last child |
|
:nth-of-type(n) |
p:nth-of-type(2) |
Selects every <p> element that is the second <p> element of its parent |
|
:only-of-type |
p:only-of-type |
Selects every <p> element that is the only <p> element of its parent |
|
:only-child |
p:only-child |
Selects every <p> element that is the only child of its parent |
|
:optional |
input:optional |
Selects <input> elements with no "required" attribute |
|
:out-of-range |
input:out-of-range |
Selects <input> elements with a value outside a specified range |
|
:read-only |
input:read-only |
Selects <input> elements with a "readonly" attribute specified |
|
:read-write |
input:read-write |
Selects <input> elements with no "readonly" attribute |
|
:required |
input:required |
Selects <input> elements with a "required" attribute specified |
|
:root |
root |
Selects the document's root element |
|
:target |
#news:target |
Selects the current active #news element (clicked on a URL containing that anchor name) |
|
:valid |
input:valid |
Selects all <input> elements with a valid value |
|
:visited |
a:visited |
Selects all visited links |
تمامی عناصر شبه کلاس ها در CSS :
|
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 |