ধাপ
৬

Advance CSS

CSS এর আগের ধাপ গুলো পুরোপুরি শেষ করে আসলে বলা যায় আপনি CSS এ প্রাথমিক পর্যায় শেষ করেছেন। এখন কিছু advance বিষয় জানবো।

CSS Combinators

CSS এর প্রধান কাজই হল এলিমেন্টকে নির্দিষ্ট করা, যাতে ঐ নির্দিষ্ট করা এলিমেন্টে নির্দিষ্ট রূপ দেয়া যায়। এ বিষয়টি ভয়ংকর মজার এবং গুরুত্বপূর্ণ অবশ্যই। এখন এ সম্পর্কেই জানব।

CSS combinator বলতে selector এর সাথে selector এর সম্পর্ককে বুঝানো হয়।

CSS3 তে চার ধরনের combinator আছে।

Descendant selector
Child selector
Adjacent sibling selector
General sibling selector

Combinator সহজে বুঝার জন্য আমরা নিচের উদাহরন HTML ডকুমেন্টটি তৈরি করি। এখানের <style> ট্যাগের ভিতর আমরা CSS লিখে combinator বুঝার চেষ্টা করব।

<!DOCTYPE html>
<html>
	<head>

		<style>
			/* Style rules goes here */
		</style>

	</head>

	<body>
		<div>
			<h1>What is Programming?</h1>
			<p>A set of instructions written in a computer language is called a program.
The task of writing a program is called programming.</p>
		</div>
		<div>
			<h1>What is programming language?</h1>
			<p>The language in which instructions of a program is written is called a programming language.</p>
			<span><p>There are mainly 3 types of programming language. Those are:</p></span>
			<ol>
				<li>Machine level language</li>
				<li>Assemble level language</li>
				<li>High level language</li>
			</ol>
		</div>
	</body>
</html>

Descendant selector

Descendant selector এমন নির্দিষ্ট করে দেয়া এলিমেন্ট সমূহে রূল প্রয়োগ করে, যেগুলো অন্য একটি নির্দিষ্ট এলিমেন্টের ভিতর রয়েছে।

যেমনঃ নিচের কোডটি <div> এলিমেন্টের ভিতরের সকল <p> এলিমেন্ট সমূহ রূল প্রয়োগ করেঃ

div p {
	background-color: yellow;
}

এক্ষেত্রে এলিমেন্টের যত ধাপ গভীরে ইচ্ছা যাওয়া যাবে। উপরের উদাহরণে শুধু দুই ধাপ গভীরে যাওয়া হয়েছে। তিন ধাপ সহ descendant selector এর উদাহরনঃ html div p ইত্যাদি। এক্ষেত্রে <html> এর ভিতরে <div> এর ভিতরে <p> এলিমেন্ট সমূহে রুল প্রয়োগ হবে।

Child selector

Child selector একটি নির্দিষ্ট এলিমেন্টের ভিতর আরেকটি নির্দিষ্ট এলিমেন্টকে নির্দিষ্ট করে রূল প্রয়োগের জন্য। এক্ষেত্রে প্রথম নির্দিষ্ট করা এলিমেন্টের কাছাকাছি যেসব দ্বিতীয় নির্দিষ্ট করা এলিমেন্ট পাওয়া যাবে শুধু সেসব এলিমেন্ট সমূহতেই রূল কাজ করবে।

যেমনঃ নিচের কোডটি <div> এলিমেন্টের ভিতরে ঐ <div> এর সরাসরি কাছে থাকা <p> এলিমেন্ট সমূহতে রুল প্রয়োগ করেঃ

div > p {
	background-color: yellow;
}

এক্ষেত্রে দেখা যাবে যেগুলো সরাসরি <div> এলিমেন্টের ভিতর সেগুলোতে রূল প্রয়োগ হয়েছে, <span> এর ভিতরের <p> এলিমেন্ট গুলোতে রূল প্রয়োগ হয়নি। কারন <span> এর ভিতরের <p> এলিমেন্টটি <div> এলিমেন্টের ভিতরে হলেও, তা সরাসরি <div> এলিমেন্টের সাথে নয়।

Descendant Selector এবং Child Selector এর মধ্যে পার্থক্যঃ

Descendant Selector এ নির্দিষ্ট করে দেয়া এলিমেন্ট সমূহ যে কোনো ভাবে ক্রম (sequence) বজায় রাখলেই হবে।
Child Selector এ নির্দিষ্ট করে দেয়া এলিমেন্ট সমূহ অবশ্যই পরপর থাকতে হবে।

উপরের পয়েন্ট দুটি বুঝার জন্য নিচের উদাহরনটি দেখা যাকঃ

<html>
	<body>
		<div>
			<p>paragraph text one</p>
			<span>
				<p>paragraph text two</p>
			</span>
		</div>
	</body>
</html>

এখানে যদি সিলেক্টর হিসেবে "body div p" ব্যবহার করা হয় তাহলে descendant সিলেক্টরের ক্ষেত্রে দুটি লিখাই নির্দিষ্ট হবে। কারন, descendant সিলেক্টর দেখেনা যে এলিমেন্ট গুলো পরপর আছে, নাকি তাদের মাঝে আরো এলিমেন্ট আছে।

অন্য দিকে "body > div > p" অর্থাৎ child সিলেক্টর ব্যবহার করলে শুধু প্রথম লিখাটি নির্দিষ্ট হবে। কারন, child সিলেক্ট দেখে যে এলিমেন্ট গুলো পরপর আছে কিনা। দ্বিতীয়় <p> এলিমেন্টের আগে একটি <span> থাকায় এটি পরপর ক্রম থেকে বিচ্ছিন্ন। ফলে এটিতে রুল প্রয়োগ হচ্ছে না।

Adjacent sibling selector

Adjacent অর্থ সন্নিহিত, নিকটবর্তী; sibling অর্থ একই পিতা-মাতার সন্তান। কিছু বুঝলেন!

Adjacent sibling selector একটি নির্দিষ্ট এলিমেন্টের পরের কোনো একটি নির্দিষ্ট এলিমেন্টে রূল প্রয়োগ করে।

যেমনঃ নিচের উদাহরন কোডটি ব্যবহার করলে দেখা যাবে <div> এলিমেন্টের পরের <p> এলিমেন্টটিতে রূল প্রয়োগ হয়েছেঃ

div + p {
	background-color: yellow;
}

General sibling selector

General sibling selector একটি নির্দিষ্ট এলিমেন্টের (প্রথম) পরের নির্দিষ্ট এলিমেন্ট (দ্বিতীয়) গুলোতে রূল প্রয়োগ করে।

div ~ p {
	background-color: yellow;
}

এখানে <div> এলিমেন্টের পরের সকল <p> এলিমেন্টে রূল প্রয়োগ হবে। এখানে <div> হচ্ছে প্রথম এলিমেন্ট এবং <p> হচ্ছে দ্বিতীয় এলিমেন্ট। বুঝানোর জন্যই এই প্রথম-দ্বিতীয় বলা।

Adjacent sibling সিলেক্টর এবং General sibling সিলেক্টরের মধ্যে পার্থক্যঃ

Adjacent sibling এ নির্দিষ্টি এলিমেন্টের পরের শুধু একটি এলিমেন্টে রুল প্রয়োগ হবে।
General sibling এ প্রথম নির্দিষ্ট এলিমেন্টের পরে যতগুলো দ্বিতীয় নির্দিষ্ট করা এলিমেন্ট পাওয়া যাবে সবগুলোতেই রুল প্রয়োগ করা হবে।

CSS Pseudo-elements / CSS Pseudo-classes

Pseudo অর্থ কৃত্রিম, ছদ্ম, মিথ্যা ইত্যাদি।

সিলেক্টরে বিশেষ কিছু বৈশিষ্ট্য দেয়ার জন্য pseudo ব্যবহার করা হয়। Pseudo এলিমেন্ট ট্যাগ সিলেক্টর এবং ক্লাস সিলেক্টর দুই ক্ষেত্রের জন্যই প্রযোজ্য। এলিমেন্ট ট্যাগ হলে একে pseudo-element বলে এবং ক্লাস সিলেক্টর হলে একে pseudo-class বলে।

Pseudo-element এর নিয়ম নিচের মতঃ

selector::pseudo-element {
	property:value;
}

pseudo-class এর ক্ষেত্রেঃ

selector.class::pseudo-element {
	property:value;
}

সিলেক্টর এবং pseudo-element এর মাঝখানে একক কোলন ":" বা দৈত কোলন "::" হতে পারে। একক কোলন (":") CSS2 এর নিয়ম। তবে CSS3 এর মানদণ্ড অনুসারে কিছু pseudo-element এর জন্য দৈত কোলন ("::") দেয়া হয়। তো বলা যায় দৈত কোলনের স্থানে একক কোলন দিলে সমস্যা নেই। তবে দৈত কোলন ব্যবহার IE8 এবং Opera 4-6 সংস্করণের পুরনো ব্রাউজার তা সমর্থন করে না।

মোট pseudo-element এর তালিকাঃ

:link
:visited
:active
:hover
:focus
::first-letter
::first-line
:first-child
::before
::after
:lang(language)

CSS Media Types

Media বলতে ওয়েব সাইট যেসব যন্ত্রে (device) লোড করা যায় সেগুলোকে বুঝায়। যেমনঃ মোবাইল, ট্যাব, ডেস্কটপ ইত্যাদি। এ ডিভাইস গুলোতে অবশ্যই ওয়েবসাইট একই ভাবে দেখাবে না, কারন এদের স্ক্রিনের আকারের ভিন্ন এবং যন্ত্র ভেদে অনেক ট্যাগ সমর্থন ভিন্নতা, অর্থাৎ ট্যাগ সমর্থন না করা। আবার এরকমও হতে পারে ওয়েবসাইটটি যখন প্রিন্ট করা হবে, তখন এর ফন্টের আকার একটু বড় করার দরকার হতে পারে, অপ্রয়োজনীয় এলিমেন্ট হাইড করলে প্রিন্টটি ভাল লাগবে ইত্যাদি, এরকম করা জন্য অর্থাৎ বিভিন্ন ক্ষেত্রের জন্য ওয়েব সাইটকে বিভিন্ন রুপ (layout) দেয়ার জন্য CSS এ ব্যবহার করা হয় Media রুল।

বিভিন্ন ধরনের মিডিয়া গুলোকে বলা হয় media type।

Media রুলটি লিখার নিয়মঃ

@media mediatype {
	selector {
		property: value;
	}
}

Media Type (ধরন) গুলো হলঃ

all
aural
braille
embossed
handheld
print
projection
screen
tty
tv

উদাহরণঃ নিচের উদাহরনের কোডটিতে "ডেস্কটপ কম্পিউটার" এবং "৭৮৬ পিক্সেল বা তার থেকে ছোট প্রস্থ বিশিষ্ট স্ক্রিনে" <p> এলিমেন্টের জন্য ভিন্ন রং এবং ফন্ট-আকার নির্দিষ্ট করা হয়েছে।

@media screen {
	p {
		font-size: 20px;
		color: red;
	}
}

@media screen and (max-width: 786px) {
	p {
		font-size: 16px;
		color: blue;
	}
}

CSS Attribute Selectors

CSS এ class এবং id ছাড়াও এট্রিবিউটের দ্বারাও এলিমেন্টকে নির্দিষ্ট করে দেয়া যায়। অর্থাৎ এ ধরনের রুল সমূহ সিলেক্টরের সাথে এট্রিবিউটও নির্দিষ্ট করে দেয়া হবে, এবং যে এলিমেন্টে ঐ এট্রিবিউট পাওয়া যাবে সেই এলিমেন্টেই শুধু CSS রুল প্রয়োগ হবে। এধরনের সিলেক্টরকে attribute selector বলা হয়।

এট্রিবিউট কে বিভিন্ন ভাবে নির্দিষ্ট করা যায়। সব ধরনের এট্রিবিউট সিলেক্টরের সাথে নিচে পরিচয় করানো হল।

[attribute] selector

[attribute] সিলেক্টরে যে এট্রিবিউটের নাম দেয়া হবে সেই এট্রিবিউটটি এলিমেন্টে থাকলে তাহলে রুল ঐ এলিমেন্টে প্রয়োগ করা হবে।

উদহরণঃ নিচের উদাহরনটি যেসব <a> এলিমেন্টে target এট্রিবিউট আছে তাদেরকে রুল প্রয়োগের জন্য নির্বাচিত করবে।

a[target] {
	background-color: yellow;
}

[attribute=value] selector

এট্রিবিউটের value (মান) দ্বারাও এলিমেন্ট সিলেক্ট করা যায়। এর নিয়ম [attribute=value]।

উদাহরনঃ নিচের উদাহরনটি যেসব <a> এলিমেন্টের ভিতর target এট্রিবিউট আছে এবং এর ভ্যালু _blank দেয়া আছে শুধু সেসব এলিমেন্টকেই নির্বাচিত করবে।

a[target="_blank"] {
	background-color: yellow;
}

[attribute~=value] selector

[attribute~=value] এ এট্রিবিউটের জন্য যে ভ্যালু দেয়া হবে সে ভ্যালুটি বা বর্ণসমূহ যদি ঐ এট্রিবিউটে বিদ্যমান (contain) থাকে তাহলে সেই এলিমেন্টকে নির্বাচিত করবে।

উদাহরণঃ নিচের উদাহরণটিতে দেখানো হয়েছে যে, যে সব এলিমেন্টের title এট্রিবিউটের ভ্যালুতে flower ভ্যালু বা বর্ণসমূহ বিদ্যামান আছে সেগুলোতেই শুধু CSS রুলটি প্রয়োগ করা হবে।

[title~="flower"] {
	border: 5px solid yellow;
}

[attribute|=value] selector

[attribute|=value] এ এট্রিবিউটের জন্য যে ভ্যালু দেয়া হবে সে ভ্যালুটি বা বর্ণসমূহ যদি ঐ এট্রিবিউটের ভ্যালুর শুরুতে বিদ্যমান থাকে তাহলে সেই এলিমেন্টসমূহকে নির্বাচিত করবে।

উদাহরণঃ নিচের উদাহরণটিতে দেখানো হয়েছে যে, যে সব এলিমেন্টের title এট্রিবিউটের শুরুতে right ভ্যালু বা বর্ণসমূহ বিদ্যামান আছে সেগুলোতেই শুধু CSS রুলটি প্রয়োগ করা হবে।

এক্ষেত্রে এট্রিবিউটে শুধু ভ্যালুটি একা থাকলে কাজ করবে, অথবা ভ্যালুটির সাথে একটি - (হইপেন) দ্বারা যুক্ত বর্ণ থাকতে পারবে, যেমনঃ class="right-text". এখানে righttext দেয়া হলে এ সিলেক্টর কাজ করবে না।

[class|="right"] {
	background: yellow;
}

[attribute^=value] selector

[attribute^=value] এ এট্রিবিউটের জন্য যে ভ্যালু দেয়া হবে সে ভ্যালুটি বা বর্ণসমূহ যদি ঐ এট্রিবিউটের ভ্যালুর শুরুতে বিদ্যমান থাকে তাহলে সেই এলিমেন্টসমূহকে নির্বাচিত করবে।

উদাহরণঃ নিচের উদাহরণটিতে দেখানো হয়েছে যে, যেসব এলিমেন্টের title এট্রিবিউটের শুরুতে right ভ্যালু বা বর্ণসমূহ বিদ্যামান আছে সেগুলোতেই শুধু CSS রুলটি প্রয়োগ করা হবে।

নোটঃ এক্ষেত্রে এট্রিবিউটে শুধু ভ্যালুটি একা থাকলে কাজ করবে, অথবা ভ্যালুটির সাথে যে কোনো ভ্যালু থাকতে পারবে, যেমনঃ class="right-text". এখানে righttext দেয়া হলেও এ সিলেক্টর কাজ করবে।

[class^="right"] {
	background: yellow;
}

[attribute$=value] selector

[attribute$=value] এ এট্রিবিউটের জন্য যে ভ্যালু দেয়া হবে সে ভ্যালুটি বা বর্ণসমূহ দিয়ে যদি ঐ এট্রিবিউটের ভ্যালু শেষ হয় তাহলে সেই এলিমেন্টসমূহকে নির্বাচিত করবে।

উদাহরণঃ নিচের উদাহরণটিতে দেখানো হয়েছে যে, যে সব এলিমেন্টের class এট্রিবিউটের ভ্যালুর শেষ text ভ্যালু বা বর্ণসমূহ বিদ্যামান আছে সেগুলোতেই শুধু CSS রুলটি প্রয়োগ করা হবে।

[class$="text"] {
	background: yellow;
}

[attribute*=value] selector

[attribute$=value] এ এট্রিবিউটের জন্য যে ভ্যালু দেয়া হবে সে ভ্যালুটি বা বর্ণসমূহ যদি কোনো এলিমেন্টের এট্রিবিউটের ভ্যালুর সাথে সম্পূর্ণ ভ্যালু বা ভ্যালুর যে কোনো অংশের সাথে মিলে যায়, তাহলে সেই সব এলিমেন্টসমূহকে এ সিলেক্টর নির্বাচিত করবে।

উদাহরণঃ নিচের উদাহরণটিতে দেখানো হয়েছে যে, যে সব এলিমেন্টের class এট্রিবিউটের ভ্যালুর যে কোনো অংশে te ভ্যালু বা বর্ণসমূহ বিদ্যামান আছে সেগুলোতেই শুধু CSS রুলটি প্রয়োগ করা হবে।

[class*="te"] {
	background: yellow;
}