CSS ˈsaɪfˈtɪ

প্রকৃতপক্ষ কী?

প্রকৃতপক্ষ উপকরণটি ব্যবহৃত হয় যখন উপকরণটির বিশেষ অবস্থা নির্দিষ্ট করা হয়。

উদাহরণে, এটি ব্যবহার করা যেতে পারে:

  • উপকরণের উপর মাউস টাইপ করা সময় শৈলী সেট করা
  • পরিদর্শিত এবং অপরিদর্শিত লিঙ্কের বিভিন্ন শৈলী সেট করা
  • উপকরণটির ফোকাস লাভ করার সময় শৈলী সেট করা
আপনি আমার উপর মাউস টাইপ করুন

বিন্যাস

প্রকৃতপক্ষের বিন্যাস:

selector:pseudo-class {
  property: value;
}

অংশপ্রতিনিধি প্রকৃতপক্ষ

লিঙ্ক বিভিন্ন পদ্ধতিতে প্রদর্শিত হতে পারে:

উদাহরণ

/* পরিদর্শিত না লিঙ্ক */
a:link {
  color: #FF0000;
}
/* পরিদর্শিত লিঙ্ক */
a:visited {
  color: #00FF00;
}
/* মাউস টাইপ করা লিঙ্ক */
a:hover {
  color: #FF00FF;
}
/* প্রত্যাখ্যানকৃত লিঙ্ক */
a:active {
  color: #0000FF;
}

আপনার হাতে প্রয়াস করুন

প্রত্যহরণ:a:hover উপর, তবেগুলির মধ্যে a:link এবং a:visited পরেই কার্যকরী হবে!a:active উপর, তবেগুলির মধ্যে a:hover পরেই কার্যকরী হবে! প্রকৃতপক্ষের নাম হাইপারফেক্সটেস বেসরকারী

প্রকৃতপক্ষ এবং CSS শ্রেণী

প্রকৃতপক্ষের সাথে CSS শ্রেণী মিলিত করা যেতে পারে:

আপনি উদাহরণটির লিঙ্কের উপর মাউস টাইপ করলে, তা রঙ পরিবর্তন করবে:

উদাহরণ

a.highlight:hover {
  color: #ff0000;
}

আপনার হাতে প্রয়াস করুন

<div> উপর টাইপ করা হয়

<div> ইলেকট্রনিক উপকরণের উপর ব্যবহার করা হয় :hover প্রকৃতপক্ষের উদাহরণ:

উদাহরণ

div:hover {
  background-color: blue;
}

আপনার হাতে প্রয়াস করুন

সহজ টুলটিপ হবে

ডিভ ইলাকা উপর মাউস লেভ দিন তারপর <p> ইলাকা প্রদর্শিত হবে (টুলটিপ-এর মতো প্রভাব):

আপনাকে উপরে মাউস লেভ দিন তারপর প্রদর্শিত হবে <p> ইলাকা

হেহে, আমি এখানে!

উদাহরণ

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

আপনার হাতে প্রয়াস করুন

CSS - :first-child প্রোফাইল

:first-child প্রোফাইলগুলি নির্দিষ্ট ইলাকার সাথে মিলেছে: তা অন্য ইলাকার প্রথম সন্তান

প্রথম <p> ইলাকা মিলেছে

এই উদাহরণে

উদাহরণ

p:first-child {
  color: blue;
}

আপনার হাতে প্রয়াস করুন

প্রত্যেকটি <p> ইলাকার প্রথম <i> ইলাকা মিলেছে

এই উদাহরণে

উদাহরণ

p i:first-child {
  color: blue;
}

আপনার হাতে প্রয়াস করুন

প্রত্যেকটি প্রথম প্রতিটি <p> ইলাকার সকল <i> ইলাকা মিলেছে

এই উদাহরণে

উদাহরণ

p:first-child i {
  color: blue;
}

আপনার হাতে প্রয়াস করুন

CSS - :lang প্রোফাইল

:lang প্রোফাইল আপনাকে বিভিন্ন ভাষার জন্য বিশেষ নিয়ম নির্দিষ্ট করতে দেয়

এই উদাহরণে:lang lang="en" এসব সম্বলিত <q> ইলাকার যুক্ত করুন

উদাহরণ

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

আপনার হাতে প্রয়াস করুন

আরও উদাহরণ

সুপার লিঙ্কে ভিন্ন শৈলী যোগ করা
এই উদাহরণে দেখা যাচ্ছে কিভাবে সুপার লিঙ্কে অন্যান্য শৈলী যোগ করা যায়
ব্যবহার করুন :focus
এই উদাহরণে দেখা যাচ্ছে কিভাবে :focus প্রোফাইল ব্যবহার করা যায়

সকল সিএসএস প্রোফাইল

পদার্থ উদাহরণ উদাহরণ বর্ণনা
:active a:active সক্রিয় লিঙ্ক বাছাই করুন
:checked input:checked প্রত্যেকটি চিহ্নিত <input> ইলাকা বাছাই করুন
:disabled input:disabled প্রত্যেকটি নিষ্ক্রিয় <input> ইলাকা বাছাই করুন
:empty p:empty প্রত্যেকটি সন্ত্রটি যার সন্তান নেই বাছাই করুন <p> ইলাকা
:enabled input:enabled প্রত্যেক সক্রিয় যে কোনও <input> ইলেকট্রনকে চিহ্নিত করুন
:first-child p:first-child পিতৃর প্রথম সন্তানকে যে কোনও <p> ইলেকট্রন চিহ্নিত করুন
:first-of-type p:first-of-type পিতৃর প্রথম <p> ইলেকট্রনকে যে কোনও <p> ইলেকট্রন চিহ্নিত করুন
:focus input:focus ফোকাস পাওয়ার যে কোনও <input> ইলেকট্রনকে চিহ্নিত করুন
:hover a:hover মাউস থেকে হওয়ার ওভারলে যে কোনও লিঙ্ককে চিহ্নিত করুন
:in-range input:in-range নির্দিষ্ট মানের মধ্যে মানবিত্ত যে কোনও <input> ইলেকট্রনকে চিহ্নিত করুন
:invalid input:invalid অবৈধ মানবিত্ত যে কোনও <input> ইলেকট্রনকে চিহ্নিত করুন
:lang(language) p:lang(it) lang অ্যাট্রিবিউটের মান "it"-এর ভাবে শুরু করা যে কোনও <p> ইলেকট্রনকে চিহ্নিত করুন
:last-child p:last-child পিতৃর শেষ সন্তানকে যে কোনও <p> ইলেকট্রন চিহ্নিত করুন
:last-of-type p:last-of-type পিতৃর শেষ <p> ইলেকট্রনকে যে কোনও <p> ইলেকট্রন চিহ্নিত করুন
:link a:link প্রত্যেক অপরিদর্শিত লিঙ্ককে চিহ্নিত করুন
:not(selector) :not(p) প্রত্যেক নন-<p> ইলেকট্রনকে যে কোনও ইলেকট্রন চিহ্নিত করুন
:nth-child(n) p:nth-child(2) পিতৃর দ্বিতীয় সন্তানকে যে কোনও <p> ইলেকট্রন চিহ্নিত করুন
:nth-last-child(n) p:nth-last-child(2) পিতৃর দ্বিতীয় সন্তানকে যে কোনও <p> ইলেকট্রন চিহ্নিত করুন, শেষ সন্তান থেকে গণনা করা হয়
:nth-last-of-type(n) p:nth-last-of-type(2) পিতৃর দ্বিতীয় <p> ইলেকট্রনকে যে কোনও <p> ইলেকট্রন চিহ্নিত করুন, শেষ সন্তান থেকে গণনা করা হয়
:nth-of-type(n) p:nth-of-type(2) প্রথম পিতৃর দ্বিতীয় <p> ইলেকট্রনকে যে কোনও <p> ইলেকট্রন চিহ্নিত করুন
:only-of-type p:only-of-type প্রথম পিতৃর একমাত্র <p> ইলেকট্রনকে যে কোনও <p> ইলেকট্রন চিহ্নিত করুন
:only-child p:only-child প্রথম পিতৃর একমাত্র সন্তান হিসাবে <p> ইলেকট্রন
:optional input:optional নির্দিষ্ট "required" অধিকারকে না সংজ্ঞায়িত <input> উপাদানকে নির্বাচন করুন
:out-of-range input:out-of-range নির্দিষ্ট পরিমাণের বাইরের মানের <input> উপাদানকে নির্বাচন করুন
:read-only input:read-only নির্দিষ্ট "readonly" অধিকারকে সংজ্ঞায়িত <input> উপাদানকে নির্বাচন করুন
:read-write input:read-write নির্দিষ্ট "readonly" অধিকারকে না সংজ্ঞায়িত <input> উপাদানকে নির্বাচন করুন
:required input:required নির্দিষ্ট "required" অধিকারকে সংজ্ঞায়িত <input> উপাদানকে নির্বাচন করুন
:root root উপাদানের মূল উপাদানকে নির্বাচন করুন
:target #news:target বর্তমানে সক্রিয় #news উপাদানকে নির্বাচন করুন (যে URL-এর অন্তর্গত এই অ্যানকর্ট নাম থাকে)
:valid input:valid সমস্ত সঠিক মানযোগ্য <input> উপাদানকে নির্বাচন করুন
:visited a:visited সমস্ত পরিদর্শিত লিঙ্ককে নির্বাচন করুন

সমস্ত CSS মিথ্যা-উপাদান

পদার্থ উদাহরণ উদাহরণ বর্ণনা
::after p::after প্রত্যেক <p> উপাদানের পরে কনটেন্ট যোগ করুন
::before p::before প্রত্যেক <p> উপাদানের আগে কনটেন্ট যোগ করুন
::first-letter p::first-letter প্রত্যেক <p> উপাদানের প্রথম অক্ষর নির্বাচন করুন
::first-line p::first-line প্রত্যেক <p> উপাদানের প্রথম লাইন নির্বাচন করুন
::selection p::selection ব্যবহারকারীর পছন্দ হওয়া উপাদানকে পালন করুন