گروه مقاله : 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
نظرات كاربران :