شبه کلاس ها در css مبحثی است که این مقاله به خود اختصاص داده است:
یک شبه کلاس (pseudo-class) برای تعریف حالت خاصی از المان (دادن style مد نظر به آن)، استفاده می شود.
در موارد زیر می توان از شبه کلاس ها استفاده کرد:
- دادن استایل به یک المان، موقعی که ماوس کاربر روی آن قرار می گیرد.
- دادن استایل های متفاوت به لینک های دیده شده (visited) و دیده نشده (unvisited)
- دادن استایل به یک المان وقتی که روی آن زوم می شود.
Mouse Over Me
نحوه کاربرد
نحوه استفاده از شبه کلاس ها در css به صورت زیر است:
selector:pseudo-class {
property:value;
}
حالت های نمایش لینک
لینک ها به روش های متفاوتی نمایش داده می شوند:
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
می توانید نتیجه آن را در لینک زیر مشاهده کنید:
در تعاریف css، حتما باید a:hover بعد از a:visited و a:link قرار بگیرد و نیز باید a:active بعد از a:hover قرار بگیرد تا به درستی کار کند.
همچنین شبه کلاس ها در css به بزرگی و کوچکی حروف حساس نیستند.
شبه کلاس ها و کلاس های css
شبه کلاس ها را می توان با کلاس های css ترکیب کرد.
مثال زیر ترکیبی از این دو نوع کلاس است:
a.highlight:hover {
color: #ff0000;
}
اعمال hover بر روی <div>
در مثال زیر نحوه اعمال hover بر div را می بینید:
div:hover {
background-color: blue;
}
در مثال زیر نیز می بینید که با حرکت ماوس بر روی المان div، یک tooltip نمایش داده می شود:
webtml.ir
وب تی ام ال، وب سایتی برای یادگیری آسان تر
<div><b>webtml.ir</b> <p>وب تی ام ال، وب سایتی برای یادگیری آسان تر</p> </div>
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
شبه کلاس ها در css برای :first-child
در اینجا شبه کلاس ها بر روی المانی که first-child المان دیگری است، اعمال می شود.
در مثال زیر سلکتور، المان p را که اولین فرزند المان های دیگر است را مشخص می کند:
p:first-child {
color: blue;
}
در مثال زیر سلکتور، المان <i> را که اولین فرزند المان های <p> است را مشخص می کند:
p i:first-child {
color: blue;
}
و در مثال زیر سلکتور، تمام المان های <i> را انتخاب می کند که درون المان <p> قرار گرفته اند و خود المان <p> اولین فرزند المان های دیگر است:
<body> <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p> <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p> <p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body>
p:first-child i {
color: blue;
}
که نتیجه را در زیر مشاهده می کنید:
I am a strong person. I am a strong person.
I am a strong person. I am a strong person.
Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.
تعیین زبان شبه کلاس ها در css
شبه کلاس :lang به شما این امکان را می دهد که قوانین خاصی برای زبان های مختلف تعریف کنید.
در مثال زیر، :lang علامت نقل قول را برای المان های <q> که برای آن ها مقدار lang="no" باشد، تعریف می کند:
q:lang(no) {
quotes: "~" "~";
}
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
که نتیجه را در زیر مشاهده می کنید:
Some text A quote in a paragraph
Some text.
دیدگاه بگذارید