شبه کلاس ها برای تعریف وضعیت خاصی از یک عنصر استفاده می شوند به طور مثال:
- زمانی که موس روی دکمه ای می رود، آن دکه استایل جدیدی بگیرد
- استایل لینک های بازدید شده (قبلا توسط کاربر کلیک شده اند) و لینک های بازدید نشده تفاوت داشته باشند
- یک عنصر زمانی استایل بگیرد که در حالت focus (روی آن کلیک شده و فعال) باشد
ساختار کلی شبه کلاس ها به این صورت است:
|
|
selector:pseudo-class{
property:value;
}
|
شبه کلاس Anchor
Anchor ها همان لینک ها هستند (تگ <a>) و شبه کلاس های خاصی دارند:
a:link : لینک هایی که هنوز وارد آن ها نشده ایدa:visited : لینک هایی که حداقل یک بار روی آن ها کلیک کرده ایمa:hover : زمانی که موس را روی یک لینک می بریدa:active : لحظه ای که روی لینک کلیک می کنید (فشردن کلیک چپ)
به مثال زیر نگاه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPEhtml>
<html>
<head>
<style>
/* لینکی که وارد آن نشده ایم */
a:link {
color:red;
}
/* لینکی که وارد آن شده ایم */
a:visited {
color:green;
}
/* آمدن موس روی لینک */
a:hover {
color:hotpink;
}
/* کلیک کردن روی لینک */
a:active {
color:blue;
}
</style>
</head>
<body>
<p><b><ahref="https://www.roxo.ir/server-response-time/"target="_blank">Thisisalink toRoxo.ir/plus</a></b></p>
<pdir='rtl'><b>نکته:</b>
a:hoverبایدهمیشهبعدازدستوراتa:linkوa:visitedبیایدتاکارکند.درغیراینصورتبیتاثیرخواهدبود
</p>
<pdir='rtl'><b>نکته:</b>
a:activeبایدهمیشهبعدازدستورa:hoverبیایدتاکارکند.درغیراینصورتبیتاثیرخواهدبود
</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در مثال بالا گفته ایم که:
- لینکی که وارد آن نشده ایم قرمز خواهد بود
- لینکی که وارد آن شده ایم سبز خواهد بود
- هنگام آمدن موس روی لینک، لینک صورتی می شود
- هنگام کلیک کردن روی لینک، لینک آبی خواهد شد
نکته: a:hover باید همیشه بعد از دستورات a:link و a:visited بیاید تا کار کند. در غیر این صورت بی تاثیر خواهد بود. همچنین a:active باید همیشه بعد از دستور a:hover بیاید تا کار کند. در غیر این صورت عمل نخواهد کرد.
شبه کلاس ها و CSS
همانطور که دیدید، شما می توانید شبه کلاس ها را با دستورات CSS ادغام کنید. به طور مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPEhtml>
<html>
<head>
<style>
a.highlight:hover {
color:#ff0000;
}
</style>
</head>
<body>
<p><aclass="highlight"href="google.com">Goodle</a></p>
<p><ahref="roxo.ir/plus">Roxo</a></p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
البته این ترکیبات مخصوص لینک ها نیستند و شما می توانید شبه کلاس ها را برای عناصر دیگر نیز تعیین کنید.
به طور مثال در کد زیر از شبه کلاس hover: روی عنصر <div> استفاده کرده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
background-color:green;
color:white;
padding:25px;
text-align:center;
}
div:hover {
background-color:blue;
}
</style>
</head>
<body>
<p>Mouse over the div element below tochange its background color:</p>
<div>Mouse Over Me</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
البته این ها مثال های ساده ای هستند. ما می توانیم تردستی های جالبی با استفاده از شبه کلاس ها انجام بدهیم! به طور مثال به صفحه ی خروجی کد زیر بروید و سعی کنید متوجه نحوه ی کار کد ها بشوید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPEhtml>
<html>
<head>
<style>
p {
display:none;
background-color:yellow;
padding:20px;
}
div:hover p {
display:block;
}
</style>
</head>
<body dir='rtl'align='center'>
<div><strong>موسخودترارویایننوشتهبیاور</Strong>
<p>منیهباکسنامرئیهستم!ازدیدنتخوشحالم!</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
شبه کلاس first-child:
شبه کلاس first-child: عنصری را هدف میگیرد که اولین فرزند عنصری دیگر باشد. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPEhtml>
<html>
<head>
<style>
p:first-child {
color:blue;
}
</style>
</head>
<body>
<p>Thisissome text.</p>
<p>Thisissome text.</p>
<pdir='rtl'><b>هشدار:</b>اگرمیخواهیداینویژگیدرInternet Explorer8وقبلترکارکندبایدDOCTYPEرامشخصکردهباشید.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مثال گفته ایم اولین عنصر <p> را پیدا کن که اولین فرزند هر عنصری باشد. در واقع تعریف first-child همین است!
البته می توانیم کدها را کمی تغییر دهیم. به طور مثال در کد زیر می خواهیم تمام عناصر <i> را پیدا کنیم که اولین فرزند یک عنصر <p> باشند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPEhtml>
<html>
<head>
<style>
p i:first-child {
color:blue;
}
</style>
</head>
<body>
<p>Iama<i>strong</i>person.Iama<i>strong</i>person.</p>
<p>Iama<i>strong</i>person.Iama<i>strong</i>person.</p>
<pdir='rtl'><b>هشدار:</b>اگرمیخواهیداینویژگیدرInternet Explorer8وقبلترکارکندبایدDOCTYPEرامشخصکردهباشید.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
از آنجا که هر دو عنصر <i> اولین فرزند هر دو عنصر <p> بوده اند، هر دو انتخاب شده اند.
یک مثال دیگر می تواند به این شکل باشد که بگوییم تمام عناصر <i> را انتخاب کند که در یک عنصر <p> باشند و آن عنصر <p> اولین فرزند یک عنصر دیگر نیز باشد! به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPEhtml>
<html>
<head>
<style>
p:first-child i {
color:blue;
}
</style>
</head>
<body>
<p>Iama<i>strong</i>person.Iama<i>strong</i>person.</p>
<p>Iama<i>strong</i>person.Iama<i>strong</i>person.</p>
<pdir='rtl'><b>هشدار:</b>اگرمیخواهیداینویژگیدرInternet Explorer8وقبلترکارکندبایدDOCTYPEرامشخصکردهباشید.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
شبه عنصر lang:
شبه عنصر lang: به شما اجازه می دهد که برای زبان های مختلف قوانین مختلفی تعیین کنید. lang: در مثال زیر عناصر <q> را پیدا می کند و سپس اگر “lang=”no داشتند برای آن ها علامت خاصی می گذارد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPEhtml>
<html>
<head>
<style>
q:lang(no) {
quotes:"~""~";
}
</style>
</head>
<body>
<p>Some text<qlang="no">Aquote inaparagraph</q>Some text.</p>
<p>Inthisexample,:lang defines the quotation marks forqelements with lang="no":</p>
<pdir='rtl'><b>هشدار:</b>اگرمیخواهیداینویژگی(یعنی:lang)درInternet Explorer8وقبلترکارکندبایدDOCTYPE!رامشخصکردهباشید.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
شبه کلاس های دیگر
شبه کلاس های بسیار زیادی در زبان CSS وجود دارد. به این شبه کلاس ها نگاه کنید:
:active :any-link :blank :checked :current :default :defined :dir() :disabled :drop :empty :enabled :first :first-child :first-of-type :fullscreen :future :focus :focus-visible :focus-within :has() :host :host() :host-context() :hover :indeterminate :in-range :invalid :is() :lang() :last-child :last-of-type :left :link :local-link :not() :nth-child() :nth-col() :nth-last-child() :nth-last-col() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :past :placeholder-shown :read-only :read-write :required :right :root :scope :target :target-within :user-invalid :valid :visited :where()
واضح است که شبه کلاس ها بسیار زیاد هستند و نمیتوان تمام آن ها را در این قسمت پوشش داد. اگر دوست دارید با شبه کلاس های بیشتری آشنا شوید می توانید به صفحه ی شبکه ی توسعه دهندگان Mozilla سر بزنید. در این صفحه اطلاعات کاملی به همراه مثال های متعدد برای انواع شبه کلاس ها آورده شده است.
امیدوارم از این قسمت لذت برده باشید.
منبع:.star-rating, .star-rating a:hover, .star-rating a:active, .star-rating .current-rating{ background: url(/temp/img/star.png) left -1000px repeat-x;direction:rtl ;cursor:pointer} .star-rating{ position:relative; width:120px; height:24px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top;direction:rtl } .star-rating li{ display: inline;padding:0px;} .star-rating a, .star-rating .current-rating{ position:absolute; top:0; left:0; text-indent:-1000em; height:24px; line-height:24px; outline:none; overflow:hidden; border: none; } .star-rating a:hover, .star-rating a:active{ background-position: left bottom; } .star-rating a.one-star{ width:20%; z-index:6; } .star-rating a.two-stars{ width:40%; z-index:5; } .star-rating a.three-stars{ width:60%; z-index:4; } .star-rating a.four-stars{ width:80%; z-index:3; } .star-rating a.five-stars{ width:100%; z-index:2; } .star-rating .current-rating{ z-index:1; background-position: left center; }%20%20%20
%20%20This%20is%20a%20link%20to%20Roxo.ir/plus
%20%20
نکته:%20%20%20%20a:hover%20باید%20همیشه%20بعد%20از%20دستورات%20a:link%20و%20a:visited%20بیاید%20تا%20کار%20کند.%20در%20غیر%20این%20صورت%20بی%20تاثیر%20خواهد%20بود%20%20%20نکته:%20%20%20%20%20a:active%20باید%20همیشه%20بعد%20از%20دستور%20a:hover%20بیاید%20تا%20کار%20کند.%20در%20غیر%20این%20صورت%20بی%20تاثیر%20خواهد%20بود%20%20%20%20
%20 
