می توانید از انتخابگرهای CSS برای هدف گذاری و سبک سازی عناصر درون یک صفحه وب استفاده کنید. یک انتخاب کننده استاندارد ممکن است یک پاراگراف خاص یا همه سرفصل ها را در یک سطح مشخص هدف قرار دهد. انتخاب کنندگان شبه همه چیز را یک قدم جلوتر می برند و به شما این امکان را می دهند که قسمت هایی از صفحه را با ظرافت بیشتری مورد هدف قرار دهید.
کلاس های شبه حالت های مختلف یک عنصر را مورد هدف قرار می دهند: برای مثال وقتی اشاره گر روی یک پیوند قرار می گیرد. عناصر شبه به شما این امکان را می دهند که قسمت خاصی از یک عنصر را مانند خط اول یک پاراگراف مورد هدف قرار دهید.
بنابراین ، بدون هیچ گونه توضیح اضافی ، بیایید مبانی کلاس های شبه و عناصر شبه را توضیح دهیم.
شبه کلاس چیست؟
شبه کلاس یک انتخاب کننده CSS است که عناصر HTML را در یک حالت خاص انتخاب می کند. برخی از حالتها به زمینه اشاره می کنند ، مانند اولین عنصر از نوع آن. سایر موارد رفتاری هستند ، مانند زمانی که پیوندی روی اشاره گر ماوس قرار دارد. آنها به شما امکان می دهند محتوا را بر اساس اقدامات کاربر تنظیم کنید. به ویژه حالتهای زمینه ای به شما کمک می کند تا کد انعطاف پذیر ، قابل نگهداری و تمیز بنویسید. حالتهای رفتاری میانبر عملکردی را ارائه می دهند که در غیر این صورت مجبورید از جاوا اسکریپت برای آن استفاده کنید.
شما به راحتی می توانید شبه کلاس ها به عنوان آنها با روده بزرگ شروع تشخیص (:). بیایید چند نمونه از کلاسهای شبه ساده و کاربر را مشاهده کنیم.
مثال شبه کلاس ساده
ابتدا کد HTML را بنویسیم.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</header>
<section>
<p>
Voluptatum fuga, impedit sequi totam numquam assumenda repellat
tempora sapiente! Nihil unde vel recusandae, expedita aperiam tempora
totam deserunt non porro reprehenderit.
</p>
<p>
Dicta totam non iusto labore sapiente numquam hic tempora earum,
minima repellendus pariatur fugit nobis ex adipisci, tempore vitae
laboriosam harum. Quidem!
</p>
<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>
<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>
<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>
<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>
<p>
Asperiores illum beatae dolores, dolore quae exercitationem laudantium,
officia nam distinctio tempora deleniti itaque quibusdam iste quo eaque
reiciendis nostrum saepe aperiam?
</p>
</section>
</body>
</html>
توجه داشته باشید که چندین پاراگراف در یک بخش وجود دارد. برای سبک بندی آنها به صورت جداگانه ، می توانید یک کلاس جداگانه به هر کدام بدهید و از انتخاب کننده کلاس CSS استفاده کنید. اما این بسیار کاربردی نیست ، به ویژه اگر محتوا ممکن است به طور مکرر تغییر کند. در عوض ، می توانید از کلاس های شبه ای استفاده کنید که در HTML وجود ندارند اما همچنان به شما امکان می دهند عناصر را هدف گذاری و سبک بندی کنید. بیایید ببینیم چگونه کار می کند:
CSS
body {
font-size: 1em;
}
header {
font-size: 3em;
}
/* Selecting the first paragraph */
p:first-child {
font-size: 1.3em;
}
/* Selecting the last paragraph */
p:last-child {
color: red;
text-decoration: underline;
}
/* Selecting the nth paragraph */
p:nth-child(3) {
color: blue;
font-style: italic;
}
p:nth-child(4) {
color: #666;
font-size: 1.9em;
}
p:nth-child(5) {
color: yellowgreen;
font-weight: bold;
}
خروجی:
با استفاده از کلاسهای شبه ساده مانند : first-child ،: nth-child (x) و ،: last-child ما به راحتی می توانیم پاراگرافها را انتخاب کرده و به آنها استایل دهیم. توجه داشته باشید که این کلاس های شبه خود پاراگراف ها را انتخاب می کنند ، نه عناصر فرزند خود را.
مثال کاربر شبه کلاس
شبه کلاسهای عملیاتی یا رفتاری فقط در صورت تعامل کاربر با سند اعمال می شود. یکی از مشهورترین مثالها عبارتند از : پیوند ، : بازدید شده ، : شناور ، و : حالتهای تمرکز . بیایید مثال وضعیت : را برای پیوند و تصویر مشاهده کنید.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<div class="image-box">
<img class="image-back" src="images/By_Unsplash_Search.jpg" alt="Coding on a laptop" />
<img class="img-front" src="images/By_Unsplash.jpg" alt="Search bar with blue background" />
</div>
<div>
<a href="#">Learn more about Pseudo-classes</a>
</div>
</body>
</html>
در این مثال ، دو تصویر و یک پیوند وجود دارد. تصاویر در یک نقطه قرار دارند ، بنابراین می توانید آنها را با مخفی کردن یکی و نشان دادن دیگری تغییر دهید.
CSS
body {
font-family: 'Inter', sans-serif;
}
.image-box {
position: relative;
width: 70%;
margin: 5em;
color: #fff;
}
.image-box img {
display: inline-block;
position: absolute;
left: 0;
width: 70%;
}
.image-box img.img-front:hover{
opacity:0;
cursor: pointer;
}
a {
position: absolute;
bottom: 2em;
left: 3em;
text-decoration: none;
color: #222;
display: inline-block;
font-size: 2.5em;
font-weight: 600;
border-bottom: 5px solid rgb(250, 0, 0);
}
a:hover {
color: rgb(250, 0, 0);
border-bottom: none;
}
این مثال اول ، نشانگر معلق ماندن روی پیوند را نشان می دهد. CSS رنگ و حاشیه خود را تغییر می دهد:
در این مثال دوم ، می توانید تأثیر حرکت شناور بر روی تصویر را مشاهده کنید. کدورت آن بر روی 0 تنظیم شده است که به طور موثر تصویر را شفاف می کند.
عنصر شبه چیست؟
یک عنصر شبه شبیه به یک کلاس شبه رفتار می کند. به یاد داشته باشید که یک کلاس شبه برای عنصر موجود اعمال می شود. در عین حال ، یک عنصر شبه مانند یک عنصر HTML جدید عمل می کند. همچنین، یک شبه عنصر با روده بزرگ دو شروع می شود (::). بیایید ببینیم چگونه با یک مثال کار می کند.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>
<div class="header-img">
<img src="By_Unsplash.jpg" alt="Coding on a laptop" />
</div>
</header>
</body>
</html>
اکنون ، ما از یک عنصر شبه :: قبل برای افزودن متن بیشتر بدانیم و از یک عنصر شبه :: پس از افزودن متن برای خرید اکنون ، فقط با استفاده از CSS استفاده می کنیم. ما همچنین ویژگی موقعیت را برای قرار دادن این عناصر شبه نسبت به محتویات اصلی اعمال می کنیم.
body {
font-family: 'Inter', sans-serif;
color: #666;
}
img {
width: 30em;
vertical-align: middle;
}
.header-img::before {
content: "Learn More";
color: #fff;
background-color: rgb(75, 159, 192);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
top: 25px;
left: -70px;
transform: rotate(-45deg);
}
.header-img::after {
content: "Buy Now";
color: #fff;
background-color: rgb(212, 115, 91);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
bottom: 25px;
right: -70px;
transform: rotate(-45deg);
}
header {
position: relative;
overflow: hidden;
font-weight: 600;
}
header,
section {
width: 30em;
}
جلوه نهایی برچسب های "روبان" را در بالا-چپ و پایین سمت راست تصویر می پوشاند:
دست به کلاس های شبه و عناصر شبه بزنید
در صورت استفاده صحیح از کلاسهای شبه CSS و عناصر شبه ، درهای بسیاری از امکانات باز می شود. ممکن است در ابتدا احساس غرق شدن کنید ، اما تمرین این تکنیک برای بهبود مهارت های طراحی وب سایت شما کلیدی است. نکته اصلی این است که همیشه طرح های خود را کاملاً آزمایش کنید و از ویژگی هایی مانند DevTools Google Chrome استفاده کنید.
امیدواریم اصول کلاس های شبه و عناصر شبه را فرا گرفته باشید. به یاد داشته باشید که یادگیری هرگز متوقف نمی شود! بنابراین ، به جستجوی انتخاب کننده های جدید CSS ادامه دهید و سعی کنید آنها را در پروژه آینده خود پیاده سازی و آزمایش کنید.
