استفاده از pseudo classes - شبه کلاس
توسط
admin
2021-12-01
در این جلسه از آموزش Css می خواهیم شما را با شبه کلاس ها آشنا کنیم . شما با استفاده از شبه کلاس ها یا pseudo classes ، می توانید به برخی از انتخابگر ها (selectors) ، بدون نیاز به کدهای جاوا اسکریپت ، استایل های خاصی ببخشید .
ساختار نوشتاری کد شبه کلاس ها به صورت زیر است:
selector:pseudo-class {property: value}
علاوه بر انتخابگر ها ، کلاس ها نیز می توانند به صورت زیر همراه با شبه کلاس ها ، مورد استفاده قرار گیرند:
selector.class:pseudo-class {property: value}
رایج ترین شبه کلاس هایی که توسط طراحان صفحات وب مورد استفاده قرار می گیرد ، به شرح زیر می باشند.
- :link شما با استفاده از این شبه کلاس ، به لینک هایی که تابحال دیده نشده اند ، استایل های مد نظرتان را اضاف می کنید.
- :visited شما با استفاده از این شبه کلاس ، می توانید به لینک هایی که دیده شده اند ، استایل های خود را اضافه کنید.
- :hover شما با استفاده از این شبه کلاس ، می توانید به لینک ها در حالت هاور یعنی حالتی که موس روی آن ها قرار می گیرد ، استایل های مورد نظر خود را اضاف کنید.
- :active شما به کمک این شبه کلاس ، به تگی که در حال حاضر فعال است ، استایل اضافه می کنید.
- چگونه سایت بسازیم ؟ آموزش کامل از صفر تا صد را در کلیک سایت دنبال کنید.
- :focus شما با استفاده از این شبه کلاس برای مواقعی که کابر با استفاده از تب ، روی تگ ها تمرکز می کند ، استایل های خاصی را تعیین می کنید.
- :first-child شما با استفاده از این شبه کلاس ، به تگی که اولین فرزند تگ پدرش می باشد ، استایل خاصی را اضافه می کنید .
- :lang شما با استفاده از این شبه کلاس ، برای تگ ها ، استایل دهی را بر اساس زبان مورد استفاده انجام دهید .
هنگام استفاده از شبه کلاس ها به نکات زیر توجه کنید :
- a:hover برای اینکه موثر باشد ، باید بعد از a:link و a:visited مورد استفاده قرار گیرد.
- a:active برای اینکه موثر باشد ، باید بعد از a:hover مورد استفاده قرار گیرد.
- شبه کلاس ها به بزرگی و کوچکی حروف حساس نیستند.
- شبه کلاس ها با کلاس های css تفاوت دارند اما می توانند با هم ترکیب شوند.
در ادامه به صورت دقیق تر به بررسی شبه کلاس ها می پردازیم.
1. استفاده از شبه کلاس :link
برای اینکه نحوه استفاده از این شبه کلاس را به خوبی بفهمید ، به مثال زیر توجه کنید:
<html>
<head>
<style type="text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href="">Black Link</a>
</body>
</html>
حالا به نتیجه توجه کنید:
2. استفاده از شبه کلاس :visited
مثال زیر نحوه استفاده از این ویژگی را به شما نشان می دهد:
<html>
<head>
<style type="text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href="">Click this link</a>
</body>
</html>
در صورتی که بر روی لینک موجود در کدهای بالا ، یکبار کلیک کنید ، بعد از آن به شکل زیر نشان داده می شود.
3. نحوه استفاده از شبه کلاس :hover
مثال زیر به شما نشان می دهد ، چطور برای حالت هاور یک لینک ، استایل مد نظر خود را اضافه کنید.
<html>
<head>
<style type="text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="">Bring Mouse Here</a>
</body>
</html>
در صورتی که موس خود را روی لینک حاصل از کدهای بالا ببرید ، نتیجه به شکل زیر خواهد بود.
4. نحوه استفاده از شبه کلاس :active
مثال زیر به شما یاد می دهد که چطور یک لینک فعال را استایل دهی کنید.
<html>
<head>
<style type="text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="">Click This Link</a>
</body>
</html>
هنگامی که بر روی لینک تولید شده از کدهای بالا کلیک کنید ، رنگ لینک ، صورتی خواهد شد.
5. نحوه استفاده از شبه کلاس :focus
مثال بعد به شما نشان می دهد که چطور از این شبه کلاس استفاده کنید .
<html>
<head>
<style type="text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href="">Click this Link</a>
</body>
</html>
